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"

Nick Dawes · Accepted Answer · 2021-01-03 02:14:38Z

3

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.

answered Jan 3, 2021 at 2:14

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-11-30 01:56:43Z

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

Collectives™ on Stack Overflow

Splidejs in Nuxt Vue

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related