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>

Passing Data

You may use Laravel's built-in @js directive to pass data to Vue components. For example, you may pass multiple props to this apexchart Vue component:

<apexchart
    :width="@js($chart['width'])"
    :height="@js($chart['height'])"
    :type="@js($chart['type'])"
    :options="@js($chart['options'])"
    :series="@js($chart['series'])"
/>

However, in this case, it would be way shorter to pass the entire $chart array using Vue's v-bind directive:

<apexchart v-bind="@js($chart)" />

Alternatively, if you don't want to use the @js directive, you could use Splade's Data Component as a wrapper around the component:

<x-splade-data :default="$chart">
    <apexchart
        :width="data.width"
        :height="data.height"
        :type="data.type"
        :options="data.options"
        :series="data.series"
    />
</x-splade-data>
 
<!-- Or, using the shorthand syntax: -->
 
<x-splade-data :default="$chart">
    <apexchart v-bind="data" />
</x-splade-data>