Vue-slider-component: With Nuxt.js

[epartipilo]

Hi,

Is there any way to this awesome component with Nuxt.js?

Right now I have this on plugins/ directory,
this {src: '~plugins/vue-slider-component', ssr: false} on nuxt.config.js,
and this <vue-slider ref="slider" v-model="price"></vue-slider> on my template but it's not rendering the component.

The only way I get to render it is importing the component on the template, it show the component the first time and works but when reloading the page it gives me de server window not defined error.

Thanks!

[NightCatSama]

Component does not support the SSR, because the component used document when the component is initialized.

[epartipilo]

Hi @NightCatSama, I managed to get it working for client-side only.
I insisted because I consider you did a great job.
If you want I can add this hack to your README file just to give an option for users to try it out.

With the help of this tutorial https://alligator.io/vuejs/hide-no-ssr/ to keep client and server DOM equal and Nuxt.js proposal for window undefined https://nuxtjs.org/faq/window-document-undefined.

Seems prety good in 'dev' mode, I have not prove it on production yet.

Cheers!

[NightCatSama]

It's great, welcome to give your pr to modify the README file.

[cdiaz]

@epartipilo You can share your Hack ?

[epartipilo]

@NightCatSama I already have the Readme.md updated in a new branch but I don't have the permission to make the push and pr.
@cdiaz I'm waiting for @NightCatSama to give me permissions to submit the README update for the hack

Cheers!

[NightCatSama]

@epartipilo You have to fork the project down and then submit pr to me.

[maicong]

@epartipilo Did you register the component correctly? Like this:

~plugins/vue-slider-component.js

import Vue from 'vue'
import VueSlider from 'vue-slider-component'

Vue.component('vue-slider', VueSlider)

nuxt.config.js

plugins: [
  //...
  {
    src: '~plugins/vue-slider-component.js',
    ssr: false
  }
]

test.vue

<template>
  <vue-slider ref="slider" v-model="price"></vue-slider>
</template>

[epartipilo]

Hello @maicong
No, I didn't because I don't know why it wasn't working, I was not sure if it was some Nuxt bug.
What I did was:

//  load library just for client side
if (process.BROWSER_BUILD) {
    let VueSlider = require('vue-slider-component')
    components['vue-slider'] = VueSlider
}

in the .vue file where I used it

[epartipilo]

Hello @maicong , I just updated the README file to explain the hack for using it with Nuxt.
If you have a cleaner solution please let me know.

Cheers

[LeCoupa]

@maicong I tried your solution but did not work for me. Still getting:

[vue-router] Failed to resolve async component default: ReferenceError: document is not defined

[alistat]

Hello, everyone! And thanks @epartipilo for the solution :)
It seems that "process.BROWSER_BUILD" is now replaced with "process.browser"
Check again here https://nuxtjs.org/faq/window-document-undefined
("process.BROWSER_BUILD" was always undefined for me...)

[tschut]

@epartipilo Did you register the component correctly? Like this:

~plugins/vue-slider-component.js

import Vue from 'vue'
import VueSlider from 'vue-slider-component'

Vue.component('vue-slider', VueSlider)

nuxt.config.js

plugins: [
  //...
  {
    src: '~plugins/vue-slider-component.js',
    ssr: false
  }
]

test.vue

<template>
  <vue-slider ref="slider" v-model="price"></vue-slider>
</template>

This solution works for me! Thanks a lot :)

[ramigs]

don't forget also to add the CSS in one of these ways:

1. globally, in nuxt.config.js

css: [ '~/assets/sass/main.scss', '~/assets/icons/main.css', 'swiper/css/swiper.css', 'vue-slider-component/theme/antd.css' ],

1. in vue-slider-component.js

import 'vue-slider-component/theme/antd.css'

1. or, in your component or page

import 'vue-slider-component/theme/antd.css'