Vue-slider-component: SSR compatibility

Created on 28 Sep 2017 · 19Comments · Source: NightCatSama/vue-slider-component

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

help wanted

Source

acupofspirt

👍5 👀1 ❤1

Most helpful comment

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

Create a plugin

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

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

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

// @/nuxt.config.js

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

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!

dfeinberg5 on 25 Dec 2017

👍46 ❤13 🎉13 😄6

All 19 comments

Sorry, the component does not support the SSR.

NightCatSama on 28 Sep 2017

@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