Nuxt2からNuxt3へのバージョンアップ時にprepend-iconに設定したアイコンが使えなくなった
今回はNuxt2からNuxt3へのバージョンアップ時にVuetifyのv-text-fieldのprepend-iconなどに定義したアイコンが使えなくなったときの対処法についてご紹介いたします。
バージョンアップ後のNuxt.jsのバージョンは3.11.2です。
Contents
Nuxt2からNuxt3へのバージョンアップ時にprepend-iconに設定したアイコンが使えなくなった
Nuxt2では
|
1 2 3 4 5 |
<v-text-field prepend-icon="person" label="Username" v-model="username" /> |
のように記載しておりましたが、Nuxt3へのバージョンアップ時にアイコンが表示されなくなりました。
結論を言うと、Vuetify3では、デフォルトではアイコンが自動的にインポートされません。
特定のアイコンセットを明示的にインストールして設定する必要があります。
1.アイコンセットのインストール
2.Vuetifyの設定にアイコンセットを追加
3.アイコンの使用
の手順が必要です。
1.アイコンセットのインストール
まず、Vuetifyのアイコンセットをインストールする必要があります。Material Design Iconsを使用する場合は以下のコマンドでインストールします。
|
1 |
npm install @mdi/font |
2.Vuetifyの設定にアイコンセットを追加
次に、vuetifyの設定ファイル（例：vuetify.tsやvuetify.jsなど）で、インストールしたMaterial Design Iconsを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// vuetify.ts import 'vuetify/styles' import { createVuetify } from 'vuetify' import { aliases, mdi } from 'vuetify/iconsets/mdi' // Vuetifyの設定 export default createVuetify({ icons: { defaultSet: 'mdi', aliases, sets: { mdi, }, }, }) |
また、nuxt.config.tsにcssとしてVuetifyのスタイルを追加します。
|
1 2 3 4 5 6 7 8 9 |
export default defineNuxtConfig({ css: [ 'vuetify/styles', '@mdi/font/css/materialdesignicons.min.css', // Material Design IconsのCSS ], build: { transpile: ['vuetify'], }, }) |
3.アイコンの使用
上記の設定を行うと、prepend-icon="mdi-person"のように、アイコンのプレフィックスとしてmdi-を使って呼び出すことができるようになります。
ちなみに私の場合、「mdi-person」ではなく「mdi-account」のようにしなければならず、名前が変わっている場合もあるので注意しましょう。
|
1 2 3 4 5 |
<v-text-field prepend-icon="mdi-account" label="Username" v-model="username" /> |
私の場合は上記の手順でアイコンを表示させることができました。
終わりに
今回はNuxt2からNuxt3へのバージョンアップ時にVuetifyのv-text-fieldのprepend-iconなどに定義したアイコンが使えなくなったときの対処法についてご紹介いたしました。