vue3-flipbook is a Vue component that displays images in 3D page flip effect.

Storybook

Install as a module:

npm i -S vue3-flipbook

or

yarn add vue3-flipbook

or

pnpm add vue3-flipbook

Or include in html:

## Usage ```html
<template>
  <flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
</template>

<style>
  .flipbook {
    width: 90vw;
    height: 90vh;
  }
</style>

If installed as a module, with Vue 3.x,

<script>
  import Flipbook from 'vue3-flipbook'
  export default {
    components: { Flipbook }
  }
</script>

You may need to specify the size of view port in your style sheet, directly to <flipbook> element, or to .viewport sub-element of flipbook.

If the size is horizontally long and singlePage prop is false (default), it displays two pages spread, suitable for desktop browsers. If it's vertically long, it displays single pages, suitable for smartphones.

There are some internal classes.

A <div> element that contains everything but <slot>. <slot> is placed above .viewport.

Approximate bounding box of the displayed images. Suitable to give box-shadow.

Supports modern browsers and IE 11.

To start development server with demo pages:

cd examples/demo
pnpm i
pnpm serve

To package for npm:

pnpm dist

• vivekKodira: README correction
• siderisng: dragToFlip
• MaikoTan: TypeScript support

MIT

quote https://ts1.github.io/flipbook-vue/ Takeshi Sone.