Vuetify のコンポーネントから Props の TypeScript 型定義を参照する

前提

• Vue3
• Vuetify3

vuetify/components パッケージから Vuetify が提供する各コンポーネントの TypeScript の型定義を参照することが出来る。
v-btn コンポーネントを参照する場合以下のようにする。

import type { VBtn } from 'vuetify/components'

VBtn の $props を参照することでv-btn コンポーネントの Props の型定義を得ることが出来る。
また Vuetify3 の v-btn では variant props でボタンの見た目を変更することができ、TypeScript のルックアップ型を利用し v-btn コンポーネントの variant props の型定義を参照する場合以下のようにする。

import type { VBtn } from 'vuetify/components'
type Variant = VBtn['$props']['variant']
// "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | undefined というユニオンリテラル型が得られる