Cannot set property 'roundSlider' of undefined

[HassanZahirnia]

Hey,
I'm trying to import this library in my Nuxt project. I simply create a plugin file with following content:

import Vue from 'vue'
import RoundSlider from 'vue-round-slider'
Vue.component('RoundSlider', RoundSlider)

But I get this error:
Cannot set property 'roundSlider' of undefined

Am I doing something wrong here?
Any helps would be appreciated. Thanks in advance

vue version: 2.6.12
nuxt version: 2.14.12
vue-round-slider version: 1.0.1

[HassanZahirnia]

I have found a solution to this issue. I just had to add this library to nuxt as a client-only plugin. It appears when it tries to compile the code during SSR, it gets into issues.

So simple solution is just :

plugins: [
    { src: '~plugins/vue-round-slider', mode: 'client' },
],

and then obviously wrapping the element in a <client-only> tag.

[soundar24]

Great.. actually I never tried with Nuxt, I ll check this once and anything needed to improve in the plugin side then ll consider that.. 👍

[Blabter]

I have found a solution to this issue. I just had to add this library to nuxt as a client-only plugin. It appears when it tries to compile the code during SSR, it gets into issues.

So simple solution is just :

plugins: [
{ src: '~plugins/vue-round-slider', mode: 'client' },
],
and then obviously wrapping the element in a <client-only> tag.

Can you explain where you took "plugins/vue-round-slider" file? After installation of this package I don't have "plugins/vue-round-slider" file. Package was installed only in "node_modules".