🔍

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

に公開
TypeScript
Vuetify
Vue 3
Vuetify 3
tech

前提

  • 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 というユニオンリテラル型が得られる

Discussion