javascript - 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"

question from:https://stackoverflow.com/questions/65545747/splidejs-in-nuxt-vue

Answer 1

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.