Generic Vue Components
defineComponent with generics, generic script setup, typed slot props.
Generic Vue Components is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Generic Components
Some components work with any data type — a typed list, a select, a table. Vue 3.3 lets you write generic components so the consumer keeps full type inference instead of falling back to any.
The generic Attribute
Add a generic attribute to <script setup>. It declares type parameters available throughout the script, exactly like a generic function.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Generic Props
Use the type parameter in defineProps. Here the component accepts an array of any type T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Type Inference at the Call Site
When the parent passes items, TypeScript infers T from the data — no explicit type needed. Pass numbers and selected must be a number.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Constraining the Type
Add extends to require certain shape. Here T must have an id, useful for keyed lists.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Multiple Type Parameters
Declare several parameters separated by commas, just like a generic function signature.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Typed Slot Props
Combine generics with typed slots so the slot content is typed too. Declare the slot signature with defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Rendering the Generic Slot
In the template, pass each item to the slot. The parent receives correctly typed slot props.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Consuming With Inference
The parent gets a typed item in the slot scope automatically — based on the array it passed in.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Generic Emits
Type parameters also flow into defineEmits, so an event payload can carry the generic type.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>When to Use Generics
Reach for generic components when a component is truly type-agnostic and you want inference to flow through it — lists, tables, autocompletes. For fixed data shapes, a normal typed component is simpler.
Quick Check
Test your knowledge of generic components.
Recap
You learned generic components:
- Declare type parameters with the generic attribute on script setup.
- Use them in defineProps for type-agnostic data like items: T[].
- Constrain with extends and add multiple params.
- Type slot props with defineSlots so consumers get full inference.
Frequently asked questions
Is the “Generic Vue Components” lesson free?
Yes — the full text of “Generic Vue Components” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Generic Vue Components”?
defineComponent with generics, generic script setup, typed slot props. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Generic Vue Components” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.