Nuxt 3 example?

[Beethoven]

Anyone has a working nuxt3 example?

Have tried: file: flipbook.client.ts

`import Flipbook from 'flipbook-vue'

export default defineNuxtPlugin((nuxtApp) => { return { provide: { Flipbook } } })`

[Vectoras]

I am using Nuxt 3 and have added it as a plugin

/plugins/flipbook-vue.ts

import FlipBook from "flipbook-vue";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("FlipBook", FlipBook);
});

[foxilated]

@Vectoras It doesn't seem to work with me, can you give me an example please?

[Vue warn]: Unhandled error during execution of render function 
  at <Flipbook key=0 pages= 
Array(7) [ "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg" ]
 > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouteProvider key="/ar/newspaper" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/ar/newspaper", hash: "", query: {}, name: "newspaper___ar", path: "/ar/newspaper", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/ar/newspaper" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <LayoutLoader key="default" layoutProps= 
Object { ref: {…} }
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
Object { ref: {…} }
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot> [deps:1449:13](http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/)
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Flipbook key=0 pages= 
Array(7) [ "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg", "https://alzawraapaper.com/vrsfls/cntnt/pctr/42366.jpg" ]
 > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouteProvider key="/ar/newspaper" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/ar/newspaper", hash: "", query: {}, name: "newspaper___ar", path: "/ar/newspaper", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/ar/newspaper" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <LayoutLoader key="default" layoutProps= 
Object { ref: {…} }
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
Object { ref: {…} }
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot> [deps:1449:13](http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/)
Uncaught (in promise) TypeError: Expected a `number[]` with length 6 or 16.
    NuxtJS 67

[kissu]

Achieve to make it work in a plugin

The edit is in the StackOverflow answer, don't really see the point of copy-pasting exactly the same thing here. Both syntaxes are working tho so that's nice! It is using the 1.0.0-beta.4 too!

The solution is on this issue on StackOverflow.

---

Using 1.0.0-alpha.4, looks like it infinite loops. Some help from the maintainers would be welcome. But at the same time, it was always quite tricky to pull off in general haha. So yeah, I gave up on the idea of having a plugin, and made it local rather.

Hopefully the package still works as a bare component in a .vue file directly.

<script setup>
import Flipbook from 'flipbook-vue'
</script>

<template>
  <Flipbook class="flipbook" :pages="['https://source.unsplash.com/random/400x400?sig=1', 'https://source.unsplash.com/random/400x400?sig=2', 'https://source.unsplash.com/random/400x400?sig=3', 'https://source.unsplash.com/random/400x400?sig=4', 'https://source.unsplash.com/random/400x400?sig=5']" />
</template>

<style scoped>
.flipbook {
  width: auto;
  height: 500px;
}
</style>

PS: not sure why my Nuxt app just froze a few times ❄️, probably because I tried to do too many things and Nuxt was kinda confused. Even if I cleared the .nuxt folder etc. Eh, works now! 🤷🏻‍♂️ 💪🏻