Vue3で星のレーティング機能を作りたい！

と思ったので早速Vue3でTypescript実装してみようと調べてみると...

Vuetify3という便利なライブラリがあるのでそれで実装しましょう！

https://vuetifyjs.com/en/components/ratings/

その前にインストールする必要があるよねということでChatGPTに聞くと


vue add vuetify

これでインストール完了！

後は


// main.js
import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
createApp(App).use(vuetify).mount('#app');

これを書けばいいのね

簡単に実装のところのサンプルをGPTに書いてもらうと？


<template>
  <v-app>
    <v-main>
      <v-container>
        <v-rating
          v-model="rating"
          background-color="yellow"
          color="blue"
          half-increments
          length="5"
          size="32"
        ></v-rating>
        <p>Rating: {{ rating }}</p>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      rating: 3.5,
    };
  },
};
</script>

<style>
@import 'vuetify/styles';
</style>

よし！これで表示されるはず！

は？何も表示されんのだが...

解決方法

結論から言うと、MDIが必要でした


npm install @mdi/font

これでインストールして、インポートに


import '@mdi/font/css/materialdesignicons.css';  // 追加

を追加すると

表示出来た！

これ先ほどのRatingComponentのサイトに載ってませんでした。いきなりRating機能実装しようとして見えなかったうえ、MDIが必要であることにすぐに到達できなかったのでこちらに記述しておきます。