NuxtN
Nuxt•11mo ago
Hugo

Use SplideJs with nuxt 3

Hi, i'm trying to use splide js on my nuxt3 app but i can't make it work well.

As the splide doc said, i registered the splide plugin like this :

import { createApp } from 'vue';
import App from './App.vue';
import VueSplide from '@splidejs/vue-splide';

const app = createApp( App );
app.use( VueSplide );
app.mount( '#app' );


now this is my splide integration:
 <div class="container flex flex-col gap-8">
    <h2 class='title-2 text-secondary-700' v-if="data && data.title">{{ data.title }}</h2>
    <client-only>
        <div v-if="loading">Chargement...</div>
        <Splide
            v-else-if="offers"
            :options="{
                pagination: false,
                rewind: true,
                perPage:1,
                gap:16,
                mediaQuery: 'min',
                breakpoints: {
                    640: {
                        perPage: 2,
                    },
                    1024:{
                        perPage: 3,
                    },
                    1280: {
                        perPage: 4,
                    }
                }
            }"
            :extensions="{SlideNumber}"
            :has-track="false"
            class="flex flex-col gap-10">
            <SplideTrack class="overflow-visible">
                <SplideSlide v-for="(offer, index) in offers">
                    <PartsOfferCard :offer="offer" variant="premium" :detailed="data.detailed"></PartsOfferCard>
                </SplideSlide>
            </SplideTrack>
            <div class="relative">
                <div class="splide__page w-full justify-center text-center font-bold text-secondary-700"></div>
                <SplideArrows buttons-variant="secondary"/>
            </div>
        </Splide>
    </client-only>
</div>

But i got errors saying "Failed to resolve component: SplideSlide
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."
Was this page helpful?