Vue 3 Book Component

Distributed under LGPL-3.0-or-later license

Book component for Vue 3. It provides easy, flexible API and great customizability.

• You can make your book interactive
• Or create interactive journal
• Or you just need to do something fast and easy way

Usage

// main.ts

import {createApp} from 'vue';
import BananaVue3BookPlugin from '@bananajs/vue3-book-component';
import '@bananajs/vue3-book-component/BananaVue3Book.css';
import App from './App.vue';

createApp(App).use(BananaVue3BookPlugin).mount('#app');

// App.vue

<template>
  <banana-vue3-book :options="options" :list="list">
      <template #first>
      </template>

      <!-- item of slot data is the same object in list prop -->
      <template #faceFront="{ item }">
      </template>

      <template #faceBack="{ item }">
      </template>

      <template #last>
      </template>
  </banana-vue3-book>
</template>
<script>
  setup() {
    const options = {
      duration: 1500,
      perspective: 1500,
      delay: 1000,
      autoplay: true,
      loop: false,
    };

    const list = [/* your data to show */];

    return { options, list };
  },
</script>

API

Props

| Name | Type | Purpose | | --------- | ------ | -------------------------- | | options | Object | Different options for book | | list | Array | Your pages to show |

Options object

duration

How fast will work auto flip.

Default: 1500

perspective

Default: 1500

delay

Delay between page turn

Default: 1000

autoplay

Turn on/off auto play

Default: false

loop

Turn on/off loop

Default: false

Slots

| Name | Data | Purpose | | ----------- | ---------- | ------------------ | | first | None | First item in book | | faceFront | { item } | Face of the page | | faceBack | { item } | Back of the page | | last | None | Last item in book |

Contributing

1. Fork it (https://github.com/bananajs-is-already-taken/vue3-book-component/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes using a semantic commit message.
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

Assets

Icons made by Freepik from www.flaticon.com