Vue.js Nuxt 3翻转本视频

我不确定如何为该插件编写它，甚至不确定它是否是Nuxt或Flipbook问题.

我通过这个在当地实现了它

<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>

That works fine in a component and not having that as a plugin is not too much of a big deal anyway.
Here is a Github comment that I posted, feel free to upvote and follow if you feel really concerned by that issue.

很抱歉没有进一步提供帮助，但我最近没有经常处理此类事情.我仍然认为通常的解决方案应该效果良好，但在这种情况下却并非如此.

编辑:这是一个带有Nuxt插件的工作解决方案！

我目前正在使用1.0.0-beta.4个.

所以，这应该是你的/plugins/flipbook.client.ts

import FlipBook from "flipbook-vue";

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

这是您之后可以在页面中使用的内容

<template>
  <client-only>
    <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']" />
  </client-only>
</template>

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

工作良好，到目前为止没有任何错误.