Anyone has a working nuxt3 example? Have tried: file: flipbook.c

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Nuxt 3 example? about flipbook-vue HOT 3 OPEN

Beethoven commented on September 22, 2024

Nuxt 3 example?

from flipbook-vue.

Comments (3)

Vectoras commented on September 22, 2024 2

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);
});

from flipbook-vue.

foxilated commented on September 22, 2024

@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

from flipbook-vue.

kissu commented on September 22, 2024

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! 🤷🏻‍♂️ 💪🏻

from flipbook-vue.

Nuxt 3 example? about flipbook-vue HOT 3 OPEN

Comments (3)

Achieve to make it work in a plugin

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent