need SSR usage example

I’m rendering my pages on server side and I found a problem that only occurs on first page render. When I’m trying to access a page with StarRating I get the following error:

Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined" found in
---> <StarRating>
          <Component> at ../src/components/Component.vue
             <App> at ../src/App.vue
               <Root>

Call stack gives much more info

ReferenceError: document is not defined
at o (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:116:1)
at r (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:100:1)
at t.exports (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:54:1)
at Object.e (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue?3ff3:8:1)
at e (../node_modules/vue-star-rating/dist/webpack:/webpack/bootstrap 1d3fc18262fd606c10d8:19:1)
at VueComponent.r (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue:2:1)

Due to vue-style-loader page you need to build server side files with target: 'node' to prevent this from happening.
After a short research I solved this problem by changing import to

import StarRating from 'vue-star-rating/src'

Maybe it’s worth adding in README.md to prevent inexperienced users like me from this error

[onlyurei]

FYI for people using Nuxt and are ok with only rendering this component client-side, there is the <no-ssr> wrapper component since rc-7:

Add <no-ssr> component (from vue-no-ssr), it allows you to render component only for client-side, see example

https://github.com/nuxt/nuxt.js/issues/1558 template on client side https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

[bunday]

For nuxt, this worked for me:

1. I created a rating.js under the plugins folder with the following content

import Vue from 'vue'
import StarRating from 'vue-star-rating'

Vue.component('star-rating', StarRating)

1. In the plugins array in the nuxt.config.js file, I added { src: '~/plugins/rating.js', mode: 'client' }
2. Then in my .vue component files, I called <star-rating> </star-rating>