NuxtのSSRでvue-star-ratingを使用する方法

NuxtのSSRでvue-star-ratingを使用する方法

NuxtのSSRでvue-star-ratingを使用する際にSSRだとエラーになりました。

最初の導入時はネットに解決策が見つからなかったので、無理矢理client-onlyで使用していましたが、運用しているとバグの原因となっていました・・！

再度ネット調査したところネット上に解決策がありましたので備忘録として記事にしてまとめておきたいと思います。

GitHub

GitHub - craigh411/vue-star-rating: A simple, highly customisable star rating component for Vue 2.x. / 3.x

:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x - GitHub - craigh411/vue-star-rating: A simple, highly customisable star rating co...

github.com

関連Issues

Add SSR Support · Issue #31 · craigh411/vue-star-rating

Add support for SSR as requested by @xloading in #17.

github.com

need SSR usage example · Issue #17 · craigh411/vue-star-rating

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 ge...

github.com

解決方法

解決方法はこのstack overflowの通りにやればいけます。

この記事でも実際にやった方法をまとめておきたいと思います。

can't add npm package to nuxt js [vue-star-rating]

I'm new in nuxt js so when I try to add npm packages it won't work these are trials. star-raing.js import Vue from 'vue' import StarsRatings from 'vue-star-ra...

stackoverflow.com

Pluginを作成

以下のようにPluginで設定します。

src/plugins/star-rating.ts

import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('StarRating', VueStarRating)

nuxt.config

mode: ‘client’で作成してください。

nuxt.config.ts

  plugins: [
    ...,
    { src: '~/plugins/star-rating.ts', mode: 'client' }
  ],

vue-star-ratingを表示する

以下のような感じで、vue-star-ratingのコンポーネントを設置すれば星の評価がNuxtでも使用することができます！

<star-rating v-model="rating"></star-rating>

<star-rating :increment="0.5"
             :max-rating="3"
             inactive-color="#000"
             active-color="#f00"
             :star-size="90">
</star-rating>

StarRating(
  :rating="Number(ratingValue)"
  :increment="0.1"
  :star-size="16"
  :show-rating="false"
)

まとめ

今回は、NuxtのSSRでvue-star-ratingを使用する方法についてまとめました！

バンドルサイズなどの理由で、星評価のコンポーネントは自作しても良いですが、ライブラリで大丈夫ならそっちを使っても便利ですね！