N
Nuxt•4d 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' );
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>
 <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."
5 Replies
kapa.ai
kapa.ai•4d ago
Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have specific details about integrating SplideJS with Nuxt 3. However, I can offer some general guidance based on similar issues with other libraries in Nuxt 3: 1. First, make sure you have installed the @splidejs/vue-splide package in your Nuxt 3 project. 2. Instead of registering the plugin globally as shown in your example (which is for a standard Vue 3 app), you should create a Nuxt plugin to register SplideJS. Create a file in your plugins directory, for example plugins/splide.client.ts: 
import VueSplide from '@splidejs/vue-splide'
import '@splidejs/vue-splide/css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSplide)
})
import VueSplide from '@splidejs/vue-splide'
import '@splidejs/vue-splide/css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSplide)
})
Note the .client in the filename, which ensures this plugin only runs on the client-side. 3. The error you're seeing suggests that Nuxt is not recognizing the SplideSlide component. To resolve this, you might need to explicitly import and register the components in your Vue file: 
<script setup>
import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide'
</script>
<script setup>
import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide'
</script>
4. Wrap your Splide component in a <client-only> tag to ensure it only renders on the client-side, as you've already done in your example. 5. If you're still encountering issues, you might need to add Splide to the compilerOptions.isCustomElement in your nuxt.config.ts file: 
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => ['splide', 'splide-slide', 'splide-track'].includes(tag),
    },
  },
  // ... other config options
})
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => ['splide', 'splide-slide', 'splide-track'].includes(tag),
    },
  },
  // ... other config options
})
These steps should help resolve the component resolution error you're encountering. If you continue to face issues, you might want to check the Nuxt documentation on integrating modules and plugins for more detailed information. Remember that when working with external libraries in Nuxt 3, it's often necessary to create a plugin and ensure proper client-side rendering, especially for libraries that manipulate the DOM directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hugo
HugoOP•4d ago
@kapa.ai Could not find a declaration file for module '@splidejs/vue-splide'. 'f:/ProjetsWeb/Tacotaf Vue/tacotaf-front/node_modules/@splidejs/vue-splide/dist/js/vue-splide.esm.js' implicitly has an 'any' type. There are types at 'f:/ProjetsWeb/Tacotaf Vue/tacotaf-front/node_modules/@splidejs/vue-splide/src/js/index.ts', but this result could not be resolved when respecting package.json "exports". The '@splidejs/vue-splide' library may need to update its package.json or typings.
kapa.ai
kapa.ai•4d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you're encountering, it appears that TypeScript is having trouble finding the type declarations for the @splidejs/vue-splide package. This issue is related to TypeScript's module resolution and the package's exports configuration. To resolve this issue, you can try the following steps: 1. First, make sure you have the latest version of @splidejs/vue-splide installed. You can update it using your package manager: 
   npm install @splidejs/vue-splide@latest
   
   npm install @splidejs/vue-splide@latest
or if you're using yarn: 
   yarn upgrade @splidejs/vue-splide
   
   yarn upgrade @splidejs/vue-splide
2. If updating doesn't solve the issue, you can try to explicitly include the types in your tsconfig.json file. Add the following to your compilerOptions: 
   {
     "compilerOptions": {
       "types": ["@splidejs/vue-splide"]
     }
   }
   
   {
     "compilerOptions": {
       "types": ["@splidejs/vue-splide"]
     }
   }
3. If the problem persists, you might need to create a declaration file to help TypeScript understand the module. Create a file named splide.d.ts in your project's type declaration directory (often @types or just in the root of your project) with the following content: 
   declare module '@splidejs/vue-splide'
   
   declare module '@splidejs/vue-splide'
4. Another approach is to use the allowSyntheticDefaultImports option in your tsconfig.json: 
   {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true
     }
   }
   
   {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true
     }
   }
5. If none of the above solutions work, you might need to adjust your import statement. Instead of importing from the package root, try importing from the specific file: 
   import VueSplide from '@splidejs/vue-splide/dist/js/vue-splide.esm.js'
   
   import VueSplide from '@splidejs/vue-splide/dist/js/vue-splide.esm.js'
Note that this is not ideal as it bypasses the package's intended entry point, but it might work as a temporary solution. If you're still facing issues after trying these steps, it might be worth checking if there's an open issue in the @splidejs/vue-splide repository related to TypeScript declarations or package exports. You could also consider opening a new issue there to bring attention to this problem. Remember, when working with Nuxt 3, it's important to ensure that your TypeScript configuration is properly set up. You can refer to the Nuxt documentation on TypeScript for more information on configuring TypeScript in your Nuxt project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?