Splidejs in Nuxt Vue

Question

Has anyone tried to use a Vue solution in Nuxt as a plugin or a module?

I'm having lots of challenges trying to do this the right way!

I'm trying to import Splide Vue slider from NPM into Nuxt and after you install it via NPM, there seems to be a challenge on how to import it into a splide.js file in plugins then try to address it in nuxtconfig.js as a plugin. I get all sorts of errors.

here are my files:

nuxt.config.js

modules: [
    // https://go.nuxtjs.dev/bootstrap
    '@nuxtjs/style-resources',
    '@nuxtjs/bulma', 
    '@splidejs/splide'
    
  ],

splide.vue (in nuxt components)

<template>
  <splide :options="options">
        <splide-slide>
            <h1>boo</h1>
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1>
        </splide-slide>
  </splide>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                rewind : true,
                  width  : 800,
                  perPage: 1,
                  gap    : '1rem',
              },
          };
      },
  }
</script>

splide.js (in plugins)

import Vue from 'vue';
import VueSplide from 'vue-splide';

Vue.use( VueSplide );
new Vue( {
    el    : '#app',
    render: h => h( App ),
  } );

this was the link on the splide site: splide instructions

my most recent error is "window is not defined"

score 3 · Answer 1 · answered Jan 03 '21 at 02:14

Rename splide.js to splide.client.js, that way it’s defined as a client-side plugin.

Nuxt docs.

If a plugin is assumed to be run only on client or server side, .client.js or .server.js can be applied as an extension of the plugin file. The file will be automatically included only on the respective (client or server) side.

score 1 · Accepted Answer · edited Nov 30 '21 at 01:56

Alright so thanks to Nick,

I also made some other changes to get it working, this is working code for me:

slider.vue (under components)

<template>
    <div>
        <splide :options="options">
        <splide-slide>
            <h1>boo1</h1>
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        </splide>
    </div>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                  rewind : true,
                  width  : 800,
                  perPage: 2,
                  gap    : '1rem',
                  
              },
          };
      },
  }
</script>

nuxt.config.js:

  plugins: [
    {src: '~/plugins/splide.js', mode: 'client'}
  ],

splide.client.js

    import Vue from 'vue';
    import VueSplide from '@splidejs/vue-splide';
    import '@splidejs/splide/dist/css/themes/splide-default.min.css';


    Vue.use( VueSplide );
    new Vue( {
        el    : '#app',
        render: h => h( App ),
    } );

index.vue (under pages)

<slider />

Could you build your app or just see it working with "Nuxt dev" ? — Yandiro, May 19 '21 at 11:32

Splidejs in Nuxt Vue

2 Answers2

Linked