Флипбук Nuxt 3
Я пытаюсь использовать флипбук-vue в Nuxt 3 (с попутным ветром), но он не работает. Помощь будет оценена по достоинству.
Я получаю следующее предупреждение в консоли браузера:
Failed to resolve component: Flipbook
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Сам компонент не отображается на странице, но находится в html:
<flipbook class = "flipbook" pages = "https://picsum.photos/200/300,https://picsum.photos/200/300,https://picsum.photos/200/300"></flipbook>
плагины/flipbook.client.ts
import FlipBook from "flipbook-vue";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("FlipBook", FlipBook);
});
страницы/book.vue
<template>
<section class = "bg-cover">
<div class = "mx-12 my-8 p-4">
<ClientOnly>
<Flipbook
class = "flipbook"
:pages = "[
'https://picsum.photos/200/300',
'https://picsum.photos/200/300',
'https://picsum.photos/200/300',
]"
/>
</ClientOnly>
</div>
</section>
</template>
Спасибо за ответ! Ранее в тот же день я увидел ваш пост и попытался преобразовать его для Nuxt 3 (я предполагаю, что это было для Nuxt 2), поскольку я использую Nuxt 3. Не могли бы вы предоставить рабочий пример для Nuxt 3? В Nuxt 3 написано, что не нужно прописывать плагины в файле конфигурации - nuxt.com/docs/guide/directory-structure/plugins
Помимо изменения nuxtApp.vueApp.component("FlipBook", FlipBook); to nuxtApp.vueApp.comComponent("Flipbook", FlipBook);` так, чтобы внедряемый компонент был Flipbook, а не FlipBook, это единственное отличие, которое я бы поместил здесь. Чтобы показать компонент, вам нужно применить немного CSS, что не оптимально, но и не мешает игре.
Ответы 1
Я не уверен, как написать это для этого плагина, и даже не знаю, связана ли это с 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>
Это прекрасно работает в компоненте, и отсутствие этого в качестве плагина в любом случае не так уж и важно.
Вот комментарий Github, который я опубликовал. Не стесняйтесь голосовать за него и подписываться на него, если вас действительно беспокоит этот вопрос.
Извините, что больше не помогаю, но в последнее время я не часто работаю с такими вещами. Я все еще думаю, что обычное решение должно работать хорошо, но в данном случае это не так.
Обновлено: это рабочее решение с плагином 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>
Работает хорошо и пока без ошибок.
Спасибо тебе за это! Я совершил глупую ошибку. В плагине у меня был nuxtApp.vueApp.comComponent("FlipBook", FlipBook); Когда я его использовал, я использовал его так <Flipbook Capital «B» против стандартного «b» 🙈
@Уоррен, на самом деле это не такая уж глупая ошибка, потому что это такая маленькая деталь. Но на самом деле это означает не одно и то же + большинство людей не обращают внимания на эту часть.
Пожалуйста, сначала прочтите это: stackoverflow.com/a/69874645/8816585 Там синтаксис того, как правильно импортировать его в Nuxt.