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>