Vue3 карусель как модуль ES в шаблоне лезвия Laravel ⇐ Javascript

[Anonymous]

Я использую Laravel 11 и использую шаблоны Blade, и я пытаюсь отойти от составления всех моих компонентов Vuejs в один файл и иметь несколько меньших файлов, которые имеют отношение к странице. < /p>
Я пытаюсь преобразовать компонент карусели, но я не уверен, как это сделать правильно. Я, но я не уверен, что правильный способ написать код. < /p>
Это мой шаблон лезвия < /p>





item.encoded_id, 'artist' => item.name_slug, 'title' => item.title_slug]) }}">












@push('css')

@endpush

@push('scripts')

import { createApp } from 'vue'
import vue3Carousel from 'https://cdn.jsdelivr.net/npm/vue3-carousel@0.13.0/+esm'
import ReleaseCarousel from './release-carousel.js'

createApp(ReleaseCarousel)
.mount('#release-carousel')

@endpush
< /code>
И это мой модуль Vue < /p>
import { Carousel, Slide } from 'vue3Carousel'

export default {
setup() {
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 }
},
components: {
Carousel,
Slide
}
}
< /code>
Опять же, я не уверен, является ли это правильным способом сделать это. Любая помощь или советы, которые очень ценят


Подробнее здесь: https://stackoverflow.com/questions/793 ... e-template