NuxtのSSRでvue-star-ratingを使用する方法
NuxtのSSRでvue-star-ratingを使用する際にSSRだとエラーになりました。
最初の導入時はネットに解決策が見つからなかったので、無理矢理client-onlyで使用していましたが、運用しているとバグの原因となっていました・・!
再度ネット調査したところネット上に解決策がありましたので備忘録として記事にしてまとめておきたいと思います。
GitHub
関連Issues
解決方法
解決方法はこのstack overflowの通りにやればいけます。
この記事でも実際にやった方法をまとめておきたいと思います。
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を使用する方法についてまとめました!
バンドルサイズなどの理由で、星評価のコンポーネントは自作しても良いですが、ライブラリで大丈夫ならそっちを使っても便利ですね!
コメント