[Feature Request] Improve Access to Component Types (such as props) for TypeScript in Vuetify 3

[MatthewAry]

Problem to solve

I've often found myself struggling to extend Vuetify components in Vuetify 3. This is because I can't make my component wrappers know what props they can pass down to Vuetify Components themselves. Let's say that I want to make a component wrapper for VCard, how would I be able to ensure that my component wrapper has the same prop list signature as what VCard provides? What about slots? What about events? Where and how can I import that information and apply it to my own wrapper?

Proposed solution

See:

• https://vuejs.org/guide/typescript/composition-api.html
• https://www.radix-vue.com/guides/styling.html#extending-a-primitive

<script setup lang="ts">
import { VCard, type VCardProps } from "vuetify/components/VCard";

interface Props extends VCardProps {
  foo: string;
}

const props = defineProps<Props>();
</script>

<template>
  <VCard v-bind="props" />
</template>

[NextThread]

hey, can I work on this? please

[KaelWD]

Duplicate of #16680

[MatthewAry]

@KaelWD The issue this was marked a duplicate of was closed by the OP. I don't think it's actually resolved. Anyways, I'm just letting you know so this request doesn't get forgotten.

[MatthewAry]

@KaelWD Can you please reopen this issue?

[moeshin]

import { VSelect } from 'vuetify/components';

type VSelectProps = VSelect['$props'];
interface Props extends /* @vue-ignore */ VSelectProps {}
const props = defineProps<Props>();

Now I am using this method. If there is no /* @vue-ignore */ comment, an error will be reported.

[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

10 |  
11 |  type VSelectProps = VSelect['$props'];
12 |  interface Props extends  VSelectProps {}
   |                           ^^^^^^^^^^^^
13 |  const props = defineProps<Props>();
14 |

[cbrgpl]

The same problem. I wanted to extend vuetify component using wrapper and cannot access vuetify types because of an error

// tried different ways
import type { GlobalComponents } from 'vue';
import type { VTextField } from 'vuetify/components';

type IVTextField = InstanceType<typeof VTextField>;

The error:

[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/home/dmitry/Templates/credit-conveyor/src/shared/ui/forms/ZTextField/ui/ZTextField.vue
11 |  import { VTextField } from 'vuetify/components';
12 |  
13 |  type IVTextField = InstanceType<typeof VTextField>;

InstanceType highlighted