• まずはこのUpgrade Guideを読み込む
• あとeslint-plugin-vuetifyを入れておくと(eslint --fix)で多くの移行を自動で行うことができる。

ただ、Upgrade Guideにかかれていない項目もあるので以降ではそれらを備忘録的にメモしておく。

v-data-table

• disable-paginationとhide-default-footer
  • Vuetify 3.5.1時点でdisable-paginationとhide-default-footerはまだサポートされておらず公式レポジトリにイシュー化されている。
  • workaroundとしてbottomのslotの中身を空にすること挙げられている

    <template v-slot:bottom></template>
    

v-btn

v-card-action内に配置されるとvariantのデフォルトがtextになりdarkテーマだと背景が透明になってしまう。variant="elevated"をつけることでボタンに指定された色で背景色がついて表示される。

v-dialog

v-cardはwidthを100%に設定しないとv-dialogのwidthいっぱいに表示されない。

v-text-field

• Vuetify2ではデフォルトは下線のみついているが、Vuetify3では下線付き & 背景がグレーとなっている。Vuetify2と同じ挙動にするにはvariant="underlined"をつけると良い。

v-btn-toggle

• roundedはrounded="xl"にする