🌟
Vuetifyのラッパーコンポーネントでpropsとslotsを補完してほしい。Vue3,typescript
vuetifyのラッパーコンポーネントの作り方は検索すると出てくるが、どれも補完機能までは言及してくれてない。
どうにか作れないかやってみた。
結論、slotはできたが、propsは上手くいかずbuildでエラーが出てしまう
[追記]
こんな書き方しなくても、propsやslotsはVSCodeでちゃんと保管されるみたい。。
効いてないように見えたのはメモリ不足かな??
環境
- nuxt : 3.7.4
- vuetify : 3.4.10
- typescript : 5.3.2
VCard.vue
<template>
<v-card
v-bind="$attrs"
v-on="$listeners"
>
<template
v-for="(_, name) in ($scopedSlots as Record<keyof VCard['$slots'], any>)"
v-slot:[name]="slotProps"
>
<slot v-bind:name="name" v-bind="slotProps"></slot>
</template>
</v-card>
</template>
<script lang="ts" setup>
import { VCard } from 'vuetify/components'
// propsの補完が効くよう、下記のように書くとエラーが出る。
// Unresolvable type reference or unsupported built-in utility type
type VCardProps = VCard['$props']
type Props = {
// ここに自由にpropsを追加
hoge?: string
} & VCardProps
const props = withDefaults(defineProps<Props>, {
hoge: ''
}
</script>
propsだけ上手く書けなかったです。
unsupported built-in utility type ってことは、nuxtのバージョン上がったらいつかサポートされるようになるのかなあ。。
だれか、解決できる人いたら教えてください。
Discussion