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

Nuxt

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

NuxtのSSRvue-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を使用する方法についてまとめました!

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

オススメの関連商品

Note一覧

コメント

タイトルとURLをコピーしました