using splide in nuxtjs about vue-splide HOT 10 CLOSED

Thanks @laraketai I solved it in stackoverflow, here is the link: https://stackoverflow.com/questions/65545747/splidejs-in-nuxt-vue

from vue-splide.

All newer versions than v0.3.5 work only for Vue3 and they don't have backwards compatibility.
v0.3.5 works with Vue2, but it has the SSR issue.

from vue-splide.

Right, the window reference error. You have to run the version as a client mode if you really need to use it in Vue2.

from vue-splide.

Created it
https://github.com/modbender/nuxt-splide

from vue-splide.

plugin:

import Vue from 'vue'
import VueSplide from '@splidejs/vue-splide'
Vue.use(VueSplide)

nuxt.config.js:
remove '@splidejs/splide' from modules

add your plugin

plugins: [ { src: '@/plugins/splideplugin' , mode: 'client' }, ],

from vue-splide.

Solved in the latest version.

from vue-splide.

Not sure about the current state of the project (no Releases tab) but looking at this SO answer, the solution is clearly not reproducible and throws a lot of errors regarding Vue3 Composition API as it can be seen here.

Not sure if the version is somehow not compatible with Nuxt2 (using Vue2) as of today, but downgrading @splidejs/vue-splide to 0.3.5 solved the issue and is working fine with Nuxt2.

@NaotoshiFujita can you confirm that backwards compatibility was lost somewhere? Or do we need to write it in another way here?

A more detailed answer on how to make it work with Nuxt2 is available here.

from vue-splide.

@NaotoshiFujita you're talking about this one?

from vue-splide.

Yep, using client-only is enough to fix the DOM mismatch issue. Thanks for the details! 🙏🏼

from vue-splide.

😎👍

from vue-splide.