Currently, I am trying to create an image carousel using Laravel along with Vue/Vuetify. The issue lies in the fact that the Vuetify v-carousel and v-carousel-item components are not rendering properly due to the error mentioned in the title.
I have already set up my Vuetify instance correctly (I believe) by following the Vuetify documentation
--The code snippet below is from my app.js file--
import Vue from 'vue'
import Vuetify, {VCarousel} from 'vuetify/lib'
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.use(Vuetify, {
components: {
VCarousel,
},
})
// export default new Vuetify({})
const app = new Vue({
}).$mount('#app');
--Below is the code for the component using the carousel--
<template>
<v-carousel>
<v-carousel-item v-for="(slide, i) in slides" :src = "slide.content " :key=i>
</v-carousel-item>
<v-carousel-item>
<!-- <v-playback autoPlay :url = "video" :type="video/mp4" :width = "720" @play = "pauseCarousel" @pause = "playCarousel" ref = 'videoPlayer'></v-playback> -->
</v-carousel-item>
</v-carousel>
</template>
This setup results in the following error:
[Vue warn]: Error in render: "TypeError: Cannot read property 't' of undefined"
found in
---> <VCarousel>
<ImageCarousel> at resources/js/components/ImageCarousel.vue
<ExampleComponent> at resources/js/components/ExampleComponent.vue
<Root>