0
357
VistasLa aplicación Nuxt arroja un mensaje de error al usar Flickity
Estoy tratando de implementar un carrusel en una aplicación Nuxt. Este es mi paquete.json
"dependencies": { "@nuxtjs/i18n": "^7.0.3", "core-js": "^3.15.1", "flickity": "^2.2.2", "lodash": "^4.17.21", "nuxt": "^2.15.7", "postcss-nesting": "^8.0.1", "throttle-debounce": "^3.0.1", "vue-flickity": "^1.2.1" },este es mi codigo
<template> <ClientOnly> <Flickity ref="flickity" :key="keyIncrementer" class="carousel" :class="{ 'carousel--active': active }" :options="computedOptions" > <slot /> </Flickity> </ClientOnly> </template> <script> import Flickity from 'vue-flickity' const DEFAULT_OPTIONS = { cellAlign: 'left', pageDots: true, prevNextButtons: true } export default { components: { Flickity, }, name: 'BaseCarousel', props: { active: { type: Boolean, default: true }, options: { type: Object, required: false, default: () => ({}) } }, Si no comento la import Flickity from 'vue-flickity' y los components: { Flickity, }, este mensaje de error.
No puedo entender lo que está mal aquí. Si alguien sabe por favor ayuda...
3 Respuestas
Responde la pregunta0
Importarlo como complemento es una solución, como se muestra aquí: https://github.com/drewjbartlett/vue-flickity/issues/38#issuecomment-906280271
Mientras tanto, no es óptimo en absoluto.
Importarlo con una importación dinámica puede ser una solución, estoy tratando de encontrar una manera de escribirlo correctamente.
respuesta actualizada
Esto parece funcionar correctamente de mi lado, ¿puede confirmarlo?
<template> <ClientOnly> <Flickity ref="flickity" :key="keyIncrementer" class="carousel" :class="{ 'carousel--active': active }" :options="computedOptions" > <slot /> </Flickity> </ClientOnly> </template> <script> import Vue from 'vue' const DEFAULT_OPTIONS = { cellAlign: 'left', pageDots: true, prevNextButtons: true, } export default { name: 'BaseCarousel', props: { active: { type: Boolean, default: true, }, options: { type: Object, required: false, default: () => ({}), }, }, async mounted() { if (process.browser) { const Flickity = await import('vue-flickity') Vue.component('Flickity', Flickity) } }, } </script>0
¿Ha agregado a plugins/vue-flickity.js algo como:
import Vue from 'vue' import Flickity from 'vue-flickity' Vue.component('Flickity', Flickity)?
Agregue también a nuxt.config.js
plugins: [ { src: '~/plugins/vue-flickity.js', ssr: false }, ]0
Otra solución es registrar localmente vue-flickity como un componente asíncrono solo en el cliente:
export default { components: { [process.browser && 'Flickity']: () => import('vue-flickity'), } }