When I use the Carousel component of the plugin I get the following error
vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js:6:29067) at renderComponentRoot (runtime-core.esm-bundler.js:895:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5059:57) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at setupRenderEffect (runtime-core.esm-bundler.js:5185:9) at mountComponent (runtime-core.esm-bundler.js:4968:9) at processComponent (runtime-core.esm-bundler.js:4926:17) at patch (runtime-core.esm-bundler.js:4518:21) at mountChildren (runtime-core.esm-bundler.js:4714:13) at 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>
attached is the git so you can review the code https://github.com/camidesarrollo/ecommers-vyp
I'm not sure, but from vue carousel documentation you can see that it uses import Vue from 'vue' syntax that is for version 2 of Vue framework. From your main.js file that has import { createApp } from 'vue' inside it, I can guess that you used version 3 of Vue framework. So maybe vue carousel is not compatible to version 3. If you want you can use it with Vue version 2 that I tested and has no error like the codes below:
main.js file:
/* ... other codes of your project */
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
/* other codes of your project ... */Then you can create a Carousel.vue and not Carousel.js file like below:
Carousel.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>Also I think it is better to choose another name for your component and not use carousel as name, because carousel is a built-in component of vue-carousel and may cause conflict to your codes.