Vuetify2からVuetify3へのバージョンアップでdenseの指定の方法が変わった【備忘録】
今回はVuetify2からVuetify3へバージョンアップを行った際に、denseの指定の方法が変わったという話をしていきます。
私個人の備忘録に近いです。
バージョンアップ後のNuxt.jsのバージョンは3.11.2で、バージョンアップ後のVuetifyのバージョンは3.7.1です。
Vuetify2からVuetify3へのバージョンアップでdenseの指定の方法が変わった【備忘録】
今まで、高さを低くする場合はVuetify2では下記のようなdenseの指定をしていたと思います。
|
1 2 |
<v-alert dense> </v-alert> |
しかしVuetify3では上記の高さの指定の仕方が変わりました。
density=defaultやdensity=comfortable、density=compactとする必要があります。
今までdenseを使っていた場合は、density="compact"となるでしょう。
|
1 2 |
<v-alert density="compact"> </v-alert> |
上記のように変えなければVuetify2からVuetify3へバージョンアップしたときにレイアウトが崩れるので注意しましょう。
詳しくはVuetifyのバージョンアップガイドに記載があるようです。
https://vuetifyjs.com/ja/getting-started/upgrade-guide/
終わりに
今回はVuetify2からVuetify3へバージョンアップを行った際に、denseの指定の方法が変わったという話をいたしました。