🌟

Vuetifyのラッパーコンポーネントでpropsとslotsを補完してほしい。Vue3,typescript

2024/02/05に公開

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