お久しぶりです！

前回の投稿から1年半以上も空いてしまいました💦

いつの間にか入社3年目に突入した松永です。

今回のブログはVuetify2からVuetify3への変更点についてご紹介しようと思います。

これから紹介する内容は全部は網羅できていないのでそこはご了承ください🙇

ボタンのサイズ指定

Vuetify2

<v-btn small>button</v-btn>

Vuetify3

<v-btn size="small">button</v-btn>

テキスト等の枠線変更

Vuetify2

<v-text-field outlined></v-text-field>

Vuetify3

<v-text-field variant="outlined"></v-text-field>

テキスト等の高さ変更

Vuetify2

<v-text-field dense></v-text-field>

Vuetify3

<v-text-field density="compact"></v-text-field>

ラジオボタン等の横並び

Vuetify2

<v-radio-group row>
<v-radio label="Option 1" value="radio-1"></v-radio>
<v-radio label="Option 2" value="radio-2"></v-radio>
</v-radio-group>

Vuetify3

<v-radio-group inline>
<v-radio label="Option 1" value="radio-1"></v-radio>
<v-radio label="Option 2" value="radio-2"></v-radio>
</v-radio-group>

ページネーションのstyle変更

Vuetify2

<v-pagination circle></v-pagination>

Vuetify3

<v-pagination rounded="circle"></v-pagination>

テーブルコンポーネントの変更

Vuetify2

<template>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        －略－
      </tbody>
    </template>
  </v-simple-table>
</template>

Vuetify3

<template>
  <v-table>
    <template v-slot:default>
      <thead>
        －略－
      </tbody>
    </template>
  </v-table>
</template>

タブコンポーネントの変更

Vuetify2

<template>
  <v-card>
    <v-tabs
     －略－
    </v-tabs>
    <v-card-text>
      <v-tabs-items v-model="tab">
        <v-tab-item value="one">
          One
        </v-tab-item>
      </v-tabs-items>
    </v-card-text>
  </v-card>
</template>

Vuetify3

<template>
  <v-card>
    <v-tabs
     －略－
    </v-tabs>
    <v-card-text>
      <v-window v-model="tab">
        <v-window-item value="one">
          One
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</template>

エクスパンションコンポーネントの変更

Vuetify2

<v-expansion-panels>
 <v-expansion-panel>
  <v-expansion-panel-header>Title</v-expansion-panel-header>
   <v-expansion-panel-content>
    Text
   </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

Vuetify3

<v-expansion-panels>
 <v-expansion-panel>
  <v-expansion-panel-title>Title</v-expansion-panel-title>
   <v-expansion-panel-text>
    Text
   </v-expansion-panel-text>
  </v-expansion-panel>
</v-expansion-panels>

以上がVuetify2からVuetify3への変更点になります！

Vuetifyの公式にはほかにも変更点がまとめてあったので載せておきます。

Vuetify3の変更点（公式）

Vuetify2からVuetify3への移行作業のときに動かなくなった時の原因の一つにもなるので要チェックですね！