Nuxt.js: How use vue-slider-component?

[olinium]

Nuxtjs always return document is not defined.
Can you show me example?
Please:3

_{This question is available on Nuxt.js community (#c479)}

[pi0]

@olinium This is because of SSR. on server side document is not available. As an option you can guard all slider usages in a if( typeof document !== 'undefined' ) condition :)

[alexchopin]

https://nuxtjs.org/faq/window-document-undefined/

[tillkolter]

@olinium Could you solve your problem? I am having the exact problem and the proposed solution does not work.

@alexchopin
What is not clear to me from your FAQ is how the slider would be used as a component as in

<template>
...
    <vue-slider></vue-slider>
</template>
<script>
  import VueSlider from 'vue-slider-component'
  export default {
    components: {..., VueSlider},
    ...
  }
</script>

I tried to add it as a plugin (and vendor) in the nuxt config with ssr: false, so that I can use it as <vue-slider> without having to explicitly specify it as a component, but in none of these cases the vue-slider element is expanded as is it specified in the plugin.

I also tried to dynamically set components:

...
<script>
  var components = {...}
  if (process.BROWSER_BUILD) {
    console.log('require vue slider component')
    var vueSlider = require('~plugins/vue-slider-component')
    components.push(vueSlider)
  }
  export default {
     components: components
  }
</script>

</template>

I would pretty much appreciate your help.

[josantana]

Hi, @tillkolter.

I'm kind having the same issue with vue-color. I have tried to create a plugin with it, to take advantage of the new ssr: false property, but that didn't work as expected:

nuxt.config.js

{
    vendor: ['vue-color'],
    plugins: [{ src: '~plugins/color', ssr: false }],
}

~plugins/color.js

import { Sketch } from 'vue-color';
export default Sketch;

~pages/test.vue

<template>
    <div>
        <color-picker v-model="bg"></color-picker>
    </div>
</template>
<script>
import Sketch from '~/plugins/color';
export default {
    components: {
        'color-picker': Sketch,
    },
};
</script>

With the code above, I was still getting this error message:

Nuxt.js Error:

ReferenceError: window is not defined
    at /MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:3482
    at /MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:3414
    at e.exports (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:3700)
    at Object.<anonymous> (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:3:5927)
    at t (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:388)
    at Object.<anonymous> (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:2:20632)
    at t (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:388)
    at Object.e.exports.e (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:568)
    at t (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:388)
    at e.__esModule.default (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:475)
    at /MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:480
    at o.(anonymous function).exports (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:143)
    at Object.<anonymous> (/MY_APP/node_modules/vue-color/dist/vue-color.min.js:1:259)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

So, I have managed to stop the errors with a solution based on yours:

~pages/test.vue

<template>
    <div>
        <color-picker v-if="ssr" v-model="bg"></color-picker>
    </div>
</template>
<script>
let components = {};
if (process.BROWSER_BUILD) {
    const Sketch = require('vue-color/src/components/Sketch.vue');
    components['color-picker'] = Sketch;
}
export default {
    components,
    asyncData() {
        return {
            ssr: process.SERVER_BUILD,
        };
    },
};
</script>

No errors this time. It works fine on client side, but the vue-color component is not rendered from server side. The question here is: There is a way to add this component to the page later, during component mount maybe?

[veebuv]

Has anyone figured out a solution for this ?

[epartipilo]

Hi @tillkolter
Did you make ir work?
I've been trying the @josantana solution but still cannot make it

Cheers!

[tillkolter]

@epartipilo @veebuv I stopped trying and implemented my own css slider directly in the component and put the handler stuff in the mounted hook.

[epartipilo]

@tillkolter well done, I'm about to do the same, got it working with @josantana solution but with the vue-warn of different HTML in client and server so it behaves weird

Thanks!

[epartipilo]

Hi @tillkolter @veebuv, I managed to use the vue-slider-component
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!

[veebuv]

Awesome thanks @epartipilo 💃

[uliana25]

@epartipilo can you show code, how you have solved this problem?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.