need SSR usage example

[oshnix]

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

[craigh411]

Thanks for this, I'll take a look at updating the docs to include handling SSR when I get the chance.

[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

[xloading]

@craigh411 thanks a lot for this component! It would be anyway great to support SSR for this plugin as client-side rendering of stars after all the other content is served from server looks somewhat ugly to be honest.

[craigh411]

@xloading Yes, that's definitely worthwhile! I've opened a separate issue for this request.

[jedita]

const rating = process.client ? require('vue-rate-it') : {}

export default {
  components: {
    StarRating: rating.StarRating,
  }
}

<template>
  <client-only>
    <star-rating />
  </client-only>
</template>

[viktor-anyvan]

Any update on this? no-ssr is not working for me, getting the error from the point when I add StarRating to the components.

[pschaub]

I have seen this issue in version 1.7.0. But version 1.6.2 does not have this issue.

[tannguyenit]

I have seen this issue in version 1.7.0. But version 1.6.2 does not have this issue.

Thanks you, But I think this package should be update at this point

[tonyeggers]

const rating = process.client ? require('vue-rate-it') : {}

export default {
  components: {
    StarRating: rating.StarRating,
  }
}

<template>
  <client-only>
    <star-rating />
  </client-only>
</template>

Following this link (https://stackoverflow.com/questions/60735985/cant-add-npm-package-to-nuxt-js-vue-star-rating) and then wrapping component with client-only seems to work for nuxt.

[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)

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

[xiangnanscu]

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)

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

@bunday Doesn't work in nuxt 3 rc

update nuxt 3 solution :

// plugins/rating.client.js
import StarRating from 'vue-star-rating'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("star-rating", StarRating);
});

Then directly use <star-rating /> in .vue file

[Trixpua]

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)

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

@bunday Doesn't work in nuxt 3 rc

update nuxt 3 solution :

// plugins/rating.client.js
import StarRating from 'vue-star-rating'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("star-rating", StarRating);
});

Then directly use <star-rating /> in .vue file

Using this solution, the component seems to work in Nuxt 3, but the console show some warns.

[Vue warn]: Failed to resolve component: star-rating
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Component <Anonymous> is missing template or render function. 

[YouMixx]

Is there a solution for Vite/InertiaJS?

[HrachovRoman]

I suffered with this task for 5 hours, this solution helped me. Instead of standard import, use a const.

const StarRating = process.client ? require('vue-star-rating').default : undefined

components: { StarRating }

It's strange why the developers don't add this information to the documentation?