dom-flipbook

A Vue 3 flipbook component that renders real DOM pages from the #pages slot. It removes the image URL pipeline entirely and keeps the API focused on live page content.

Features

• DOM pages only, passed through the #pages slot
• 3D polygon page flip effect
• mouse drag and touch swipe flipping
• viewer zoom controls
• no screenshot conversion
• no image preload or pagesHiRes model

Installation

npm install dom-flipbook vue rematrix

Quick Start

<script setup>
import DomFlipbook from 'dom-flipbook'
import 'dom-flipbook/style.css'
</script>

<template>
  <DomFlipbook :page-width="960" :page-height="600" :single-page="true">
    <template #pages>
      <article class="demo-page">First page</article>
      <article class="demo-page">Second page</article>
      <article class="demo-page">Third page</article>
    </template>
  </DomFlipbook>
</template>

<style scoped>
.demo-page {
  width: 100%;
  height: 100%;
  padding: 24px;
  background: #f5ecd8;
}
</style>

How It Works

DomFlipbook reads every direct child from the #pages slot as one page. Each page stays as live DOM during normal display and during flip animation.

This package only supports DOM slot pages. It does not accept image arrays, high-resolution image arrays, or loading placeholders.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | pageWidth | number | 960 | Intrinsic width of one page. | | pageHeight | number | 600 | Intrinsic height of one page. | | flipDuration | number | 1000 | Flip animation duration in ms. | | zoomDuration | number | 500 | Zoom animation duration in ms. | | zooms | number[] | [1, 2, 4] | Allowed viewer zoom levels. | | perspective | number | 2400 | 3D perspective depth. | | nPolygons | number | 10 | Horizontal strips per flipping page. | | ambient | number | 0.4 | Ambient light intensity. | | gloss | number | 0.6 | Specular light intensity. | | swipeMin | number | 3 | Minimum drag distance before flipping. | | singlePage | boolean | false | Force single-page mode. | | forwardDirection | 'right' \| 'left' | 'right' | Reading direction. | | centering | boolean | true | Center the active sheet in the viewport. | | startPage | number \| null | null | Initial 1-based page number. | | clickToZoom | boolean | true | Toggle zoom by click or tap. | | dragToFlip | boolean | true | Enable drag and swipe flipping. | | wheel | string | 'scroll' | Use 'zoom' to map the wheel to zooming. |

Slots

#pages

Pass each page as one direct child node.

<DomFlipbook>
  <template #pages>
    <PageOne />
    <PageTwo />
    <PageThree />
  </template>
</DomFlipbook>

Default slot

The default slot exposes controller state and methods.

| Name | Type | Description | |------|------|-------------| | canFlipLeft | boolean | Whether previous-page flipping is currently allowed. | | canFlipRight | boolean | Whether next-page flipping is currently allowed. | | canZoomIn | boolean | Whether zoom-in is currently allowed. | | canZoomOut | boolean | Whether zoom-out is currently allowed. | | page | number | Current 1-based page number. | | numPages | number | Total number of pages. | | flipLeft() | () => void | Flip to the previous page. | | flipRight() | () => void | Flip to the next page. | | zoomIn() | () => void | Increase viewer zoom. | | zoomOut() | () => void | Decrease viewer zoom. |

Events

• flip-left-start
• flip-left-end
• flip-right-start
• flip-right-end
• zoom-start
• zoom-end

CSS

The package ships a compiled stylesheet. Import it once in your app entry or component setup:

import 'dom-flipbook/style.css'

Publish

Build and inspect the package before publishing:

cd packages/dom-flipbook
npm run build
npm run pack:check
npm publish

If npm reports a name collision later, change the name field in package.json before publishing.

License

MIT