Vue 3 adapter
new@love-rox/ptpt-vue
Split-flap displays for Vue 3: <Patapata>, <PatapataBoard>, and a useFlipCell composable. Same options and behavior as the React adapter — drops straight into a Vue app.
Install
Install
@love-rox/ptpt-core comes along as a dependency. vue (>=3.4) is a peer dependency. Import @love-rox/ptpt-core/styles.css once for the default look.
bun
bun add @love-rox/ptpt-vuepnpm
pnpm add @love-rox/ptpt-vuenpm
npm i @love-rox/ptpt-vueyarn
yarn add @love-rox/ptpt-vueUsage
Usage
Import in <script setup> and bind a targets string to <PatapataBoard>. The cell count comes from its length; cell-options apply to every cell, and class / style fall through to the root.
<script setup lang="ts">
import { PatapataBoard } from "@love-rox/ptpt-vue";
import { alphanumericPreset } from "@love-rox/ptpt-core/presets/alphanumeric";
import "@love-rox/ptpt-core/styles.css";
</script>
<template>
<PatapataBoard
:cell-options="{ preset: alphanumericPreset }"
targets="TOKYO "
flip-mode="replace"
/>
</template>Options
Options
The Vue component accepts the exact same options as the React component. Shared cell options also line up 1:1 with the rehype and Astro adapters.
Shared cell options
| Option | Type | Default | Description |
|---|---|---|---|
| preset | PresetDefinition | string | defaultPreset | The flap set. Pass a PresetDefinition (its recommendedDuration / locale become defaults) or a string of characters whose order is the flap order. Mutually exclusive with frames. |
| frames | FrameInput[] | undefined | An explicit frame set — text, images, or arbitrary elements. Mutually exclusive with preset. |
| durationPerFlap | number | preset's recommendation, else 200 | Milliseconds for one flap. Overrides the preset's recommendedDuration. |
| direction | 'forward' | 'shortest' | 'forward' | Direction taken through the frame ring. shortest may reverse to reach a nearer flap. |
| reducedMotion | 'instant' | 'minimal' | 'ignore' | 'instant' | Behaviour when the OS prefers reduced motion. instant snaps to the target without animating. |
Component-only props
| Option | Type | Default | Description |
|---|---|---|---|
| target | string | — | Slug to flip to whenever it changes. |
| flipMode | 'replace' | 'queue' | undefined | Behaviour when target changes rapidly. replace coalesces to the latest; queue runs each in order. |
| onFlipComplete | () => void | undefined | Called after each flip settles. |
| className / style | string / CSSProperties | undefined | Applied to the cell's host element. |
Behaviour
Behavior notes
- Options are read on mount — pass a
keyto rebuild; changingtarget/targetsjust triggers a flip. - Use
flip-mode="queue"to run rapid updates in order instead of coalescing to the latest with the defaultreplace. - Emits
flip-completeafter each flip settles; the board exposes onerole="status"live region. - Pass preset objects (
:preset="digitsPreset"), not strings — a string is treated as the literal flap characters, not a preset name.
Related
Other adapters
On React? The React adapter has the same API. Rendering Markdown or building a static site? The rehype and Astro adapters do this at build time, with no Vue in the bundle.