SSR compatibility

[acupofspirt]

Hi, is it SSR compatible? Because I got some errors like "document is not defined" when using rendering in Node environment (no NUXT).

[NightCatSama]

Sorry, the component does not support the SSR.

[acupofspirt]

@NightCatSama, I solved that with importing plugin source file like

 import cVueSlider from 'vue-slider-component/src/vue2-slider.vue'

and in webpack config

{
   test: /\.vue?$/,
   exclude: /node_modules\/(?!vue-slider-component)/,
   loader: 'vue-loader'
}

This approach works because if we let vue-server-renderer/server-plugin work with raw(not minified and compiled) .vue files with

[NightCatSama]

Thank you for your sharing, this will help other people using this component.

[jordanranson]

+1 for SSR support. We are also using this in a project and require SSR. Any plans to make it work?

[jdenekat]

acupofspirt: when trying to follow your recipe for SSR, I get the following error:

error during render : .../node_modules/vue-slider-component/src/vue2-slider.vue:1 (function (exports, require, module, __filename, __dirname) {

where the error is unexpected token '<'. Does the

[dfeinberg5]

I ran into the same unexpected token '<' error and got everything working using the following:

1. Create a plugin

// @/plugins/vue-slider-component.js

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

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

2. Register the plugin, with ssr set to "false"

// @/nuxt.config.js

module.exports = {
  ...
  build: {
    vendor: [
      'vue-slider-component'
    ],
    ...
    plugins: [
      { src: '~/plugins/vue-slider-component', ssr: false }
    ]
  }
}

3. Use the component in a template

<template>
  <vue-slider>
  </vue-slider>
</template>

<script>
  export default {
  ...
  // don't register the vue-slider component
  }
</script>

Notes:

• You do NOT need to nest it in a component (i.e. you don't need to install something like "vue-no-ssr")
• You do NOT need any of that "if (process.browser)" stuff
• You should NOT import or register the component in the script within your single file template since it's already being declared globally

Hope this helps!

[fixcik]

+1

[tonyisworking]

On 3.0.16 SSR still didn't work and creating a plugin seemed like a lot more work in my current project. I was getting "document is not defined" like OP, but then I tried something that worked for me.

If I lazy load the vue-slider component then the my page works, but it would still complain about 'document is not defined' in cli only, but the page loads. So I then I conditionally loaded vue-slider component with a variable to render only if `typeof window !== 'undefined' && window.document' And it works! The slider doesn't load instantly, but this is a good fix for now.

<template>
  <no-ssr>
    <vue-slider v-if="renderComponent" v-model="range" />
  </no-ssr>
</template>

<script>
import NoSSR from 'vue-no-ssr'
const VueSlider = () => import('vue-slider-component')

export default {
  components: {
    VueSlider,
    'no-ssr': NoSSR
  },
  data () {
    return {
      renderComponent: false
    }
  },
  beforeDestroy () {
    this.renderComponent = false
  },
  mounted () {
    if (typeof window !== 'undefined' && window.document) {
      this.renderComponent = true
    }
  },
</script>

[NightCatSama]

@tonyisworking In version 3.0.18 I added a file that extracted css.

You can use it like this:

import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min'
import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'

[Jesus82]

Hi @NightCatSama. I'm trying to use version 3.0.25 with SSR in Nuxt (2.6.1)

So far I included this in nuxt.config.js

module.exports = {
    plugins: [
      '~/plugins/vue-slider-component'
    ]
}

And then in '~/plugins/vue-slider-component.js'

import Vue from 'vue'

import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'

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

But then when I use it like <vue-slider></vue-slider> It gives me the document is not defined error. Previously I was using it wrapped in <no-ssr></no-ssr> and everything was running OK (but obviously with a delay when loading the page). Any hint about what I am doing wrong?

Thanks in advance!

[NightCatSama]

I didn't use plugins, nor did I use the no-ssr tag, which works fine.

I am using [email protected].

@Jesus82

[NightCatSama]

@Jesus82 [email protected] tested no problem, I just used it in pages/index.vue.

[Jesus82]

Hi, confirmed that it works OK both as a plugin as described in and including it locally in a page or in a component. (my local copy was stuck in the object not defined error, but after opening it in another tab, everything worked as expected).

Thanks!

[NicolasHofmairT23]

Hi, I am using Vue-Storefront (wich uses SSR) and integrated the vue-slider-component the way @NightCatSama suggested

import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min'
import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'

This works good, the slider is working.

But Chrome spams this notification in the console:

Unable to preventDefault inside passive event listener invocation.
in vue-slider-component.umd.min.js

In an other project this solution is suggested: touch-action: none on the drag element.

I tried to add this in the browser but seems not to change anything.

I am using the vue-slider-component in an other project (without SSR) without this issue. So i guess it might be a problem of the integration of the component in the way i described above?

I appreciate every hint.

[NightCatSama]

@NicolasHofmairT23 Are you using it on the mobile side or on the PC side?

Maybe mousemove also needs to add passive: false?

https://github.com/NightCatSama/vue-slider-component/blob/master/lib/vue-slider.tsx#L347-L348

[tonyisworking]

@NicolasHofmairT23 This is a VueStorefront issue -> In your index.js for your theme remove the import for " import '@vue-storefront/core/lib/passive-listeners' " and the errors disappear.

[NicolasHofmairT23]

@NightCatSama Thanks for your advice. I just noticed the error log when i was in desktop mode. When I activated the mobile emulator in chrome the error did not appear.

@tonyisworking Thank you. This solved my problem. It was caused by vue-storefront as you said. See here, too https://github.com/DivanteLtd/vue-storefront/issues/2572

[dzikoysk]

None of the above examples fully work for me with Gridsome stack, but I've mixed them and here is a combination that pretty much works in every env I've tested:

1. Create plugin @dfeinberg5 said + import assets offered by @NightCatSama

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

import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'

Vue.component('VueSlider', VueSlider)

2. Import it in Gridsome Client API

export default function (Vue, { router, head, isClient }) {
  Vue.use(import('~/plugins/vue-slider-component.js'))
}

3. Import VueSlider as a lazy component

export default {
    components: {
        VueSlider: () => import('vue-slider-component/dist-css/vue-slider-component.umd.min.js')
    }
}

4. Use VueSlider component without ClientOnly wrapper

I'm not sure why it works only if I mix plugin with component, but I'm just glad that it finally works. Maybe it will be helpful for someone in the future.

[xaander1]

@NightCatSama I can get it to work with @nuxt-amp after adding the code

// import component
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
import 'vue-slider-component/dist-css/vue-slider-component.css'

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

i get the slider but it does not respond to drags. No errors!!!

what could be the issue??

[mrleblanc101]

Importing this plugin result in this warning:

DevTools failed to load source map: Could not load content for http://localhost:3000/default.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

import Vue from 'vue';

import 'vue-slider-component/dist-css/vue-slider-component.css';
import 'vue-slider-component/theme/default.css';

import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js';

Vue.component('VueSlider', VueSlider);

Changing import 'vue-slider-component/theme/default.css' to import 'vue-slider-component/lib/theme/default.scss'; removed the warning as I'm already using SCSS.

[rx-837]

@NightCatSama after some research, i found primary ssr falling problem:

when you importing styles, like this:

import './styles/slider.scss'
import './styles/dot.scss'
import './styles/mark.scss'

compiler add code from ./node_modules/vue-style-loader

code from node_modules/vue-style-loader contains document to load css by js, calling document on ssr leads to falling

simple fix can look as remove imports:

import './styles/slider.scss'
import './styles/dot.scss'
import './styles/mark.scss'

and moving all styles to other entrypoint.

Other simple fix - use ./dist-css/vue-slider-component.umd.min.js as main file in package.json because of dist-css moves all styles to separate file

Can you replace file path("main") in package.json?

[KyleBrown-804]

Using version v3.2.24 I am still running into the same issues as others above trying to get this to work in Nuxt 3. Does anyone have a non hacky solution to using this in an SSR environment (Nuxt 3) while also using Vue 3 composition API such as <script setup> syntax?

Attempting to import from dist-css like mentioned here and in some comments above: https://nightcatsama.github.io/vue-slider-component/#/?hash=server-side-rendering-ssr, I am still having no success and am running into the document is not defined issue appearing to stem from vue-style-loader.

Updated: tried the v4 beta but that does not work out of the box either with SSR.

[fenn1ks]

Using version v3.2.24 I am still running into the same issues as others above trying to get this to work in Nuxt 3. Does anyone have a non hacky solution to using this in an SSR environment (Nuxt 3) while also using Vue 3 composition API such as <script setup> syntax?

Attempting to import from dist-css like mentioned here and in some comments above: https://nightcatsama.github.io/vue-slider-component/#/?hash=server-side-rendering-ssr, I am still having no success and am running into the document is not defined issue appearing to stem from vue-style-loader.

Updated: tried the v4 beta but that does not work out of the box either with SSR.

I install 4.1.0-beta.7 on Nuxt 3.10.2 this is work!

<script setup lang="ts"> import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js' import 'vue-slider-component/dist-css/vue-slider-component.css' <style lang="scss"> @import 'vue-slider-component/lib/theme/material.scss';