Generic Vue Components
defineComponent with generics, generic script setup, typed slot props.
Generic Vue Components is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Generic Vue Components” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Generic Vue Components”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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.
All lessons in this course
- TypeScript Setup in Vue Projects
- Typed Props and Emits with defineProps/defineEmits
- Typing Composables and Refs
- Generic Vue Components