【Vue×Vuetify×MDIフォント】チェックボックスが表示されないときの対象方法

前回記事の続きです。

【Vue×Vuetify×Vue-Router】ナビゲーションバーを作ってみる

今回は、VueとVuetifyのプロジェクトにCheckboxが表示されない👇ときの確認方法について書いていきます。

原因

原因は、アイコンフォント（MDI）が読み込まれていないことが原因です。
ブラウザで見るとHTMLの中身はこんな風になっていました。

<i class="mdi-checkbox-marked mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>

これはMaterial Design Icons のクラス

つまり：
■Vuetify自体は正常動作 ✅
■でも アイコンのフォントが無いので表示できない ❌

解決方法の手順

1.npmで入れる

npm install @mdi/font

2.main.tsに追加

main.tsにアイコンフォント(MDI)を追加(import)します。

main.ts

// Vuetifyのデフォルトのスタイリングが適用
import 'vuetify/styles'

// VuetifyのcreateVuetify関数をインポート
import { createVuetify } from 'vuetify'

// Vuetifyのコンポーネントが使用できる
import * as components from 'vuetify/components'

// Vuetifyのディレクティブが使用できる
import * as directives from 'vuetify/directives'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // ルーティング機能を追加
import '@mdi/font/css/materialdesignicons.css' // アイコンフォント(MDI)を追加

// インポートしたコンポーネントとディレクティブを設定としてVueインスタンスを生成
const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(router).use(vuetify).mount('#app'); // ルーティング機能を追加

すると、下記のように表示されます。

サイト

Vuetify使うとmarginやpaddingの調整がめっちゃ楽な件