Nuxt3×FireBaseで星5評価機能を使いたい(vue-star-rating or nuxt-rating)

前置き

Nuxt3でゲームレビューサイトを作っている際によく見る星５評価機能を実装したいと考え、実装に苦戦中なのでまとめとして記事にしてみました。

• Nuxt3
• FireBase

を使っています。

いろいろ調べていく中で、vue-star-ratingとnuxt-ratingというモジュールがヒット。
結論から言うと最終的にはvue-star-ratingを使用した形になります。

nuxt-rating

私はnuxt-ratingから試しました。
インストール。

# Using pnpm
pnpm add nuxt-rating

# Using yarn
yarn add nuxt-rating

# Using npm
npm install nuxt-rating

nuxt.config.tsに追加。

export default defineNuxtConfig({
  modules: ["nuxt-rating"],
});

これでNuxtRatingが使えるようになります。

<NuxtRating :read-only="false" :ratingValue="1.2" />

使用できるprops

• ratingCount(オプション、デフォルト: 5): 使用可能な評価レベルの合計数
• ratingSize(オプション、デフォルト:「32px」): 評価メーターのサイズ。
• activeColor(オプション、デフォルト: 「#ffc700」): アクティブな評価レベルの色。
• inactiveColor(オプション、デフォルト: 「グレー」): 非アクティブな評価レベルの色。
• ratingValue(オプション、デフォルト: 3.7): 初期評価値。
• ratingContent（任意、デフォルト：「★」）：評価レベルごとに表示する内容。
• readOnly(オプション、デフォルト: true): 評価メーターが読み取り専用か対話型かを指定します。

バージョンも更新されておらず、扱いにくさはありました。

vue-star-rating

インストール

# Using pnpm
pnpm add vue-star-rating

# Using yarn
yarn add vue-star-rating

# Using npm
npm install vue-star-rating

pluginsフォルダにクライアントサイドのみで必要なため、client.jsで追加し、以下記述。

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

また、TypeScriptでは、モジュールが外部から提供される場合、その型定義を明示的に指定する必要があります。そのため、d.tsファイルを作成し以下記述。

declare module 'vue-star-rating';

この宣言を行うことで、vue-star-ratingモジュールのインポート時に、TypeScriptコンパイラがその型情報を解釈し、適切な型チェックを行うことが可能になります。

import StarRating from 'vue-star-rating';

これでインポートすることにより、StarRatingがtemplate内で使用できるようになリました。
例

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

使用できるprops

props	内容	初期値
increament	評価の刻み。0.5なら星が半分づつ増える。	1
rating	評価の初期値。DBのデータを反映させたい時はこれに設定。	0
max-rating	最大評価。	5
read-only	true だと読み取り専用	false
show-rating	星の横の評価を表示するかどうか	true

詳細はgithubご覧ください