Search code examples
javascriptvue.jsnuxt.jssplidejs

vue-splide only works in Nuxt dev environment

I am having issues trying to make vue-splide work outside of nuxt dev, after generating the static or the spa, it doesn't work properly.

Changing the target in nuxt.config.js from static to SPA doesn't solve the problem. Instead of using nuxt generate I also tried nuxt build and the results are the same.

The two pictures are here:

The slider is working only in one of them, as it can be seen.

Any help on making it work properly so I can deploy the site?

nuxt.config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Visgrow Internships',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,300;2,100&display=swap' },
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [{ src: '~/plugins/splide.client.js', ssr: false }],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios'
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

splide.client.js

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';
// import '@splidejs/splide/dist/css/splide.min.css';
// Importing the original CSS does not change a thing. Also, I import the above CSS in the bellow css
import '../plugins-css/splide.css';


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

  • Tried it on my side, working perfectly fine.

    Install the package with either yarn or npm.

    yarn add @splidejs/vue-splide

    Setup the plugin in the usual way.

    vue-splide.client.js

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

Vue.use(VueSplide)

    Import the plugin in plugins, no need to use ssr: false (it actually does not exist anymore) nor mode since you went to suffix the file with client.js.

    export default {
  ssr: false,
  target: 'static',
  plugins: ['~/plugins/vue-splide.client.js'],
  ...
}

    Then, using it in a view is perfectly fine, styling aside.

    pages/index.vue

    <template>
  <div>
    <splide class="custom">
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?water" />
      </splide-slide>
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?fire" />
      </splide-slide>
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?earth" />
      </splide-slide>
    </splide>
  </div>
</template>

<style scoped>
.splide__slide {
  height: 50vh;
  margin: 0 auto;
}
.custom {
  height: 50vh;
  width: auto;
}
</style>

    For the project, I went with ssr: false and target: 'static' (PS: target: SPA does not exist) so, I then need to do

    yarn generate
yarn start

    And here is the result enter image description here