This is a follow up question to my previous question here Vue3 Carousel as ES module in Laravel blade template
I am using Vue 3 Carousel as an ES module to separate my components buit I'
Uncaught TypeError: Cannot read properties of null (reading 'refs') at Er (vue.esm-browser.prod.js:1:42975)
What am I doing wrong or missing in my code?
This is my javascript module:
import { Carousel, Slide } from '/[email protected]/+esm'
export default {
props: {
releases: {
type: Array,
required: true
}
},
setup(props) {
const carouselConfig = {
wrapAround: true,
itemsToShow: 3,
snapAlign: 'center',
autoplay: 2000,
breakpoints: {
600: {
itemsToShow: 1,
snapAlign: 'start'
},
1000: {
itemsToShow: 2,
snapAlign: 'start'
},
1200: {
itemsToShow: 3,
snapAlign: 'start'
}
}
}
return { carouselConfig, releases: props.releases }
},
components: {
Carousel,
Slide
}
}
and here is my html page with the template code
<div id="release-carousel">
<Carousel v-bind="carouselConfig">
<Slide v-for="(item, index) in releases" :key="index">
<div class="text-center p-2 bg-white">
<div class="mb-4">
<a :href="'/releases/' + item.encoded_id + '/' + item.name_slug + '/' + item.title_slug">
<picture>
<source :srcset="'/images/releases/thumbs/' + item.filename + '.webp'" type="image/webp" />
<source :srcset="'/images/releases/thumbs/' + item.filename + '.jpg'" type="image/jpeg" />
<img
class="mx-auto img-fluid p-1 lazy"
:data-src="'/images/releases/thumbs/' + item.filename + '.jpg'"
:alt="item.name + ' - ' + item.title"
width="300"
height="300"
/>
</picture>
</a>
</div>
</div>
</Slide>
</Carousel>
</div>
@push('css')
<link rel="stylesheet" href="{{ asset('css/carousel.css') }}">
@endpush
@push('scripts')
<script type="module">
import { createApp } from 'vue'
import ReleaseCarousel from '/js/release-carousel.js'
const releasesData = @json($releases);
createApp(ReleaseCarousel, { releases: releasesData }).mount('#release-carousel')
</script>
@endpush