[[Vuetify2]]を[[Vuetify3]]へ移行する時に気を付けること。コンポーネントごとに。 ## [v-alert](https://vuetifyjs.com/en/components/alerts/#usage) | Vuetify2 | Vuetify3 | | -------- | --------------- | | text | variant="tonal" | | | icon="mdi-*" | > [!memo] > - `text`よりも`tonal`の方がもとのデザインに近い > - 一部のalertはアイコンが変わっているため、必要に応じて `icon` で指定する ## [v-autocomplete](https://vuetifyjs.com/en/components/autocompletes/#item-and-selection) | Vuetify2 | Vuetify3 | | --------------- | ----------------- | | item-text | item-title | | cache-items | | | deletable-chips | closable-chips | | small-chips | chips? | | dense | density="compact" | ## [v-btn](https://vuetifyjs.com/en/components/buttons/#usage) | Vuetify2 | Vuetify3 | | ---------------------- | -------------------- | | small | size="small" | | absolute | position="absolute" | | text | variant="text" | | right | location="right" | | fab | icon<br>rounded="xl" | | `<v-icon>...</v-icon>` | prepend-icon="..." | `location`は半角スペース区切りで複数指定可。 ## [v-btn-toggle](https://vuetifyjs.com/en/components/button-groups/#multiple) | Vuetify2 | Vuetify3 | | -------- | ----------------- | | dense | density="compact" | ## [v-card](https://vuetifyjs.com/en/components/cards/) | Vuetify2 | Vuetify3 | | -------- | ------------- | | flat | varian="flat" | ## [v-chips](https://vuetifyjs.com/en/components/chips) | Vuetify2 | Vuetify3 | | -------- | ------------- | | small | size="small" | | ??? | variant="???" | ## [v-data-table](https://vuetifyjs.com/en/components/data-tables/introduction/#components) ~~`v-data-table`は今はないので `v-table` を使う。~~ #2024/01/11 時点では追加されている。 - `headers`の`text` は `title` に変更 | Vuetify2 | Vuetify3 | | ------------------- | ------------------- | | headers[].text | headers[].title | | disable-pagination | :item-per-page="-1" | | disable-sort | | | hide-default-footer | 以下で記載 | `hide-default-footer`は以下2つのあわせ技。 - `:item-per-page="1"` - `<template #bottom></template>` でslotに空を指定 ## [v-dialog](https://vuetifyjs.com/en/components/dialogs/#usage) | Vuetify2 | Vuetify3 | | ---------------------- | ---------------------------------- | | value | model-value | ## [v-file-input](https://vuetifyjs.com/en/components/file-inputs/#validation) | Vuetify2 | Vuetify3 | | ---------------------- | ---------------------------------- | | value | model-value | | | variant="underlined" | - `value: File | null` が `Value: File[] | undefined` に変わっているので注意 ## [v-icons](https://vuetifyjs.com/en/components/icons) | Vuetify2 | Vuetify3 | | -------- | ------------ | | small | size="small" | | left | start | | right | end | ## [v-list](https://vuetifyjs.com/en/components/lists/#usage) | Vuetify2 | Vuetify3 | | ----------------------------- | ------------------ | | dense | density="compact" | | `<v-list-item-content>` | | | two-line | lines="two" | | `<v-list-item-group v-model>` | `<v-list v-model>` | ## [v-menu](https://vuetifyjs.com/en/components/menus/#usage) | Vuetify2 | Vuetify3 | | -------- | --------------------- | | offset-x | location="end" | | offset-y | location="bottom"<br> | ## [v-overlay](https://vuetifyjs.com/en/components/overlays/#usage) | Vuetify2 | Vuetify3 | | -------- | ----------- | | value | model-value | ## [v-radio-group](https://vuetifyjs.com/en/components/radio-buttons/#usage) | Vuetify2 | Vuetify3 | | ------------- | --------------- | | row | inline | | | color="primary" | > [!info] > colorがデフォルトで"black"になったので"primary"をつけないと以前と同等にならない ## [v-select](https://vuetifyjs.com/en/components/selects/#usage) | Vuetify2 | Vuetify3 | | --------------- | ----------------- | | item-text | item-title | | cache-items | | | deletable-chips | closable-chips | | small-chips | | | dense | density="compact" | ## v-simple-table [v-table](https://vuetifyjs.com/en/components/tables/#usage)を使う。 ## [v-snackbar](https://vuetifyjs.com/en/components/snackbars/#usage) | Vuetify2 | Vuetify3 | | ------------- | -------------- | | v-slot:action | v-slot:actions | ## [v-tabs](https://vuetifyjs.com/en/components/tabs/#usage) 以下の方式に変更する。 ```html <v-tabs v-model="state.tab"> <v-tab value="item1">アイテム1</v-tab> <v-tab value="item2">アイテム2</v-tab> </v-tabs> <v-window v-model="state.tab"> <v-window-item value="item1" class="pa-5"> <span>アイテム1の中身</span> </v-window-item> <v-window-item value="item2" class="pa-5"> <span>アイテム2の中身</span> </v-window-item> </v-window> ``` | Vuetify2 | Vuetify3 | | ------------- | ------------------- | | centered | align-tabs="center" | ## [v-text-field](https://vuetifyjs.com/en/components/text-fields/#usage) | Vuetify2 | Vuetify3 | | -------- | ------------------ | | dense | density="compact" | | outlined | variant="outlined" | ## [v-textarea](https://vuetifyjs.com/en/components/textareas/#usage) | Vuetify2 | Vuetify3 | | -------- | ------------------ | | height | | | outlined | variant="outlined" | ## [v-toolbar](https://vuetifyjs.com/en/components/toolbars/#usage) `v-dialog`の中で使われる場合とか。 | Vuetify2 | Vuetify3 | | ---------------------- | ---------------------------------- | | `<slot>` | title | ## [v-tooltip](https://vuetifyjs.com/en/components/tooltips/#usage) | Vuetify2 | Vuetify3 | | ------------------------------------------------------------------- | ----------------------------------------------------- | | v-slot:activator="{ on, attrs }"<br><v-btn v-bind="attrs" v-on="on" | v-slot:activator="{ props }"<br><v-btn v-bind="props" | | bottom | location="bottom" |