Vuetify2~3の変更点比較

はじめに

LIGTHzアドベントカレンダー 2022の６日目の記事です。

11月1日にVuetify3がリリースされました！👏

Vuetify2からの変更点が多く、移行に時間がかかっています。
（v-data-tableとv-date-pickerがまだ利用できないのが痛いです😓）

今回はVuetify2からVuetify3に移行した際に、動かなくなった箇所とその解消メモです。

コンポーネント

solo,outlined,サイズ等のstyle　propsの指定

vuetify2

<v-btn small outlined></v-btn>

vuetify3では↓

vuetify3

<v-btn size="small" variant="outlined"></v-btn>

text、outlined、solo　等のpropsは廃止され、
variant,size propで指定するようになりました。

v-combobox

コンボボックスの選択肢にアイコンを挿入するなど、カスタマイズする方法

vuetify2

<v-combobox
    v-model="select"
    :items="items"
  >
    <template v-slot:item="{ item }">
      <v-icon color="primary" class="pr-1" v-if="item.icon">
        {{ item.icon }}
      </v-icon>
      <v-list-item-content>
        <v-list-item-subtitle>
          {{ item.title }}
        </v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </v-combobox>

script/data

      select: "",
      items: [
        { title: "いちご", icon: "mdi-heart" },
        { title: "バナナ", icon: "mdi-star" },
      ],

vuetify3では↓

vuetify3

   <v-combobox v-model="select" :items="items">
        <template #item="{ props }">
          <v-list-item v-bind="props">
            <template #title="{ title }">
              <v-icon
                color="primary"
                class="pr-1"
                v-if="props.value.icon"
                :icon="props.value.icon"
              ></v-icon>
              {{ title }}
            </template>
          </v-list-item>
        </template>
      </v-combobox>

itemslotがv-list-itemを自動生成しなくなりました。
vuetify3のupgrade-guideに補足で記述があります

style

styleでテーマ色やマテリアルカラーを指定する方法

vuetify3

.class1 {
  color: var(--v-theme-primary);
}

vuetify3では↓

vuetify3

.class1 {
  color: rgb(var(--v-theme-primary));
}

RGB値で持つようになる為、このように変更する必要があります。

変更対応する箇所が多かったところと詰まったところ上げました。
また移行中に気づいたところがあれば追記します。