Cuando uso el componente Carrusel del complemento, aparece el siguiente error
vue-carousel.min.js:6 No capturado (en promesa) TypeError: No se pueden leer las propiedades de undefined (leyendo '_c') en Proxy.r (vue-carousel.min.js:6:29067) en renderComponentRoot (runtime-core .esm-bundler.js:895:44) en ReactiveEffect.componentUpdateFn [como fn] (runtime-core.esm-bundler.js:5059:57) en ReactiveEffect.run (reactiveEffect.esm-bundler.js:185:25 ) en setupRenderEffect (runtime-core.esm-bundler.js:5185:9) en mountComponent (runtime-core.esm-bundler.js:4968:9) en processComponent (runtime-core.esm-bundler.js:4926: 17) en el parche (runtime-core.esm-bundler.js:4518:21) en mountChildren (runtime-core.esm-bundler.js:4714:13) en mountElement (runtime-core.esm-bundler.js:4623 :17)
package.json -> "vue-carousel": "^0.18.0", *---------------------------------------------------------------------------------------------* main.js import { createApp } from 'vue' import store from './store' import router from './router' import './index.css' import App from './App.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faUserSecret) import { Carousel, Slide } from "vue-carousel"; createApp(App) .use(store) .use(router) .use(library) .mount('#app') *---------------------------------------------------------------------------------------------* Carousel.js <template> <div> <carousel> </carousel> </div> </template> <script> import { Carousel, Slide } from "vue-carousel"; export default { components: { Carousel, Slide, }, props: { msg: String, }, data() { return { perPage: 4, selectedIndex: 0, }; }, computed: { slides() { return Array.from(Array(10).keys()).map((item) => item + 1); }, }, methods: { slideClick(index) { console.log("Slide index: ", index); }, handleButtonClick(index) { const maxIndexAbleClick = this.slides.length - this.perPage; this.selectedIndex = index <= maxIndexAbleClick ? index : maxIndexAbleClick; console.log("new index", this.selectedIndex); }, }, setup() {}, }; </script>adjunto el git para que puedas revisar el código https://github.com/camidesarrollo/ecommers-vyp
No estoy seguro, pero a partir de la documentación del carrusel de vue puede ver que utiliza la sintaxis import Vue from 'vue' que es para la versión 2 de Vue framework. Desde su archivo main.js que tiene import { createApp } from 'vue' dentro de él, puedo suponer que usó la versión 3 de Vue framework. Entonces, tal vez vue carousel no sea compatible con la versión 3. Si lo desea, puede usarlo con la versión 2 de Vue que probé y no tiene ningún error como los códigos a continuación:
archivo principal.js:
/* ... other codes of your project */ import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel); /* other codes of your project ... */Luego puede crear un archivo Carousel.vue y no Carousel.js como se muestra a continuación:
Carrusel.vue:
<template> <div> <carousel> <slide> Slide 1 Content </slide> <slide> Slide 2 Content </slide> </carousel> </div> </template> <script> export default { name: "CarouselCompo", /* Add other codes according to documentation here. */ } </script> <style scoped> </style> También creo que es mejor elegir otro nombre para su componente y no usar carrusel como nombre, porque carrusel es un componente integrado de vue-carousel y puede causar conflicto con sus códigos.