Vuetify2からVuetify3へのバージョンアップでv-list-item-iconを変えるサンプル【備忘録】
今回はVuetify2からVuetify3へのバージョンアップを行ったときに、v-list-item-iconを変えるサンプルについてご紹介いたします。
個人の備忘録に近いです。
バージョンアップ後のNuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。
Vuetify2からVuetify3へのバージョンアップでv-list-item-iconを変えるサンプル【備忘録】
Vuetify3へのアップグレードガイドに記載されておりますが、Vuetify3ではv-list-item-iconコンポーネントが削除されました。
https://vuetifyjs.com/ja/getting-started/upgrade-guide/
例えば、Vuetify2で次のようなソースコードがあったとしましょう。
|
1 2 3 |
<v-list-item-icon> <v-icon>home</v-icon> </v-list-item-icon> |
v-iconのテキスト部分はGoogle Material Iconを使っていると仮定します。
結論を先に書くと、Vuetify2では次のような表現になると思います。
|
1 2 3 4 |
<!-- prependスロットを使用してmaterial-iconsのspan要素を表示 --> <template #prepend> <span class="material-icons" style="margin-right: 16px;">home</span> </template> |
Vuetify3では、v-list-item-iconコンポーネントが削除されたため、アイコンを表示するにはprependやappendスロットを使用する必要があります。
また、v-iconをspan要素に置き換えてmaterial-iconsクラスを使う場合も、同様にprependスロットを使用してv-list-itemにアイコンを追加することができます。
終わりに
今回はVuetify2からVuetify3へのバージョンアップを行ったときに、v-list-item-iconを変えるサンプルについてご紹介いたしました。