Using Vue libraries

Using Vue libraries in a Splade app works the same as any other Vue application. You may install the library using npm, and then import and register it in the main app.js file. If you're using SSR, make sure to import the component in ssr.js as well.

npm install vue3-carousel

You must import and register the component by passing both a name string and a component definition. Note how the name can be different from the component definition.

import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';      
 
const el = document.getElementById("app");
 
createApp({
    render: renderSpladeApp({ el }),
})
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true
    })
    .component('Carousel', Carousel)      
    .component('CarouselSlide', Slide)    
    .component('CarouselPagination', Pagination)      
    .component('CarouselNavigation', Navigation)      
    .mount(el);

Instead of calling the component method for each component, you may also use the components key and pass an object:

import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';      
 
createApp({
    render: renderSpladeApp({ el })
})
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true,
        "components": { 
            Carousel,   
            CarouselSlide: Slide,   
            CarouselPagination: Pagination, 
            CarouselNavigation: Navigation,  
        },  
    })
    .mount(el);

Now you may use the library in a Blade template. Note how we loop over the $products items with the Blade @foreach directive, inside the Vue Carousel component.

<x-layout>
    <h1>Products</h1>
 
    <Carousel>
        @foreach($products as $key => $product)
            <CarouselSlide key="{{ $key }}">
                {{ $product->name }}
            </CarouselSlide>
        @endforeach
 
        <template #addons>
            <CarouselNavigation />
            <CarouselPagination />
        </template>
    </Carousel>
</x-layout>