Does defineProps({ items: Array }) work with a generic type parameter?

No. The runtime variant of defineProps with a props options object gives the compiler no type information; generic inference only works with the type annotation defineProps ().

How does the component know its concrete type T at the call site?

TypeScript, via Volar, automatically infers T from the props actually passed, similar to a generic function. An array of type User[] causes T to be recognized as User inside the component.

Can a generic component also have typed scoped slots?

Yes, defineSlots () lets scoped slots be typed with the same generic type parameter as props and emits, so all three consistently reference the same concrete type.

Does the generic attribute support default values for type parameters?

No, unlike plain TypeScript generics with , default values are currently not supported in the generic attribute. A concrete type must always be inferable at the call site.

How do you constrain the generic type to specific properties?

With an extends constraint, for example , when the component internally relies on an id property, say for the key binding in v-for.

What happens when TypeScript cannot unambiguously infer the generic type?

TypeScript falls back to a broader, less precise type. In practice this usually shows up as missing autocompletion in the editor, without immediately causing a hard error.

Are complex mapped types possible inside the generic attribute?

Only to a limited extent. The Vue compiler supports a pragmatic subset of TypeScript generics, so complex mapped or conditional types are better moved into a separate, plain TypeScript function or a composable.

Is the generic attribute usable with the options API too?

Not directly the same way. script setup generics are tied to the script setup syntax; the options API still needs a different, more cumbersome approach via defineComponent for generic components.

Vue script setup Generics: Building Typed, Reusable Components

{ }

Vue.js · TypeScript · Generics · script setup

script setup Generics
building typed, reusable components

A list component that renders rows regardless of whether they represent users, products or orders is a classic case for TypeScript generics, yet Vue components long lacked the right syntax for it. Since Vue 3.3, script setup supports its own generic attribute, letting props, emits and slots bind type-safely to a generic type parameter without falling back on any or unknown. The result is components that behave like generic functions: written once, but usable for arbitrary, concrete item types with full autocompletion.

15 min read

1From which Vue version is the generic attribute in script setup supported?

Since Vue 3.3. Earlier versions have no generic attribute on the script setup tag; generic components had to be awkwardly recreated with the options API through defineComponent instead.

2How do you declare multiple type parameters at once?

As a comma-separated list in the generic attribute, exactly as in plain TypeScript, for example