Vuetify2からVuetify3へのバージョンアップでcolorの指定の方法が変わった【備忘録】
今回はVuetify2からVuetify3へのバージョンアップでcolorの指定の方法が変わったという話をしていきます。
検索に引っかかりにくく、個人のメモの意味合いも強いため備忘録寄りの記事となります。
バージョンアップ後のNuxt.jsのバージョンは3.11.2で、バージョンアップ後のVuetifyのバージョンは3.7.1です。
Vuetify2からVuetify3へのバージョンアップでcolorの指定の方法が変わった【備忘録】
Vuetify2からVuetify3へのバージョンアップでcolorの指定の方法が変わりました。
例えば、今までのVuetify2ではv-app-barに対して
|
1 2 |
<v-app-bar color="red lighten-2" fixed> </v-app-bar> |
のようなcolorの指定方法を行っていたものが、Vuetify3では
|
1 2 |
<v-app-bar color="red-lighten-2" fixed> </v-app-bar> |
のように「red」などの色名とその補助的な「lighten-2」の間にハイフンが必要となりました。
ややハマりやすい箇所となるので覚えておきましょう。
終わりに
今回はVuetify2からVuetify3へのバージョンアップでcolorの指定の方法が変わったという話をいたしました。