Generic components in Vue - Step-by-Step Execution

Concept Flow - Generic components

Define generic component with <slot>

↓

Use generic component with different content

↓

Vue renders generic component

↓

Slot content replaces <slot> placeholder

↓

Final rendered output shows customized content

The flow shows how a generic Vue component uses slots to accept different content, which Vue then renders in place of the slot.

Execution Sample

Vue

<template>
  <GenericCard>
    <h2>Title</h2>
    <p>Some content here.</p>
  </GenericCard>
</template>

<script setup>
import GenericCard from './GenericCard.vue'
</script>

This code uses a generic component called GenericCard and passes custom content inside it using slots.

Execution Table

Step	Action	Component State	Slot Content	Rendered Output
1	Vue reads <GenericCard> usage	GenericCard defined with <slot>	None yet	Placeholder for slot
2	Vue processes children inside <GenericCard>	GenericCard ready to render	<h2>Title</h2><p>Some content here.</p>	Slot replaced with passed content
3	Vue renders GenericCard with slot content	GenericCard rendered	<h2>Title</h2><p>Some content here.</p>	<div class="card"><h2>Title</h2><p>Some content here.</p></div>
4	Final output displayed in browser	Rendered DOM	Slot content visible	Card with title and paragraph visible

💡 Rendering completes after slot content replaces the <slot> placeholder inside GenericCard.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
Component State	GenericCard defined	Ready to render with slot	Rendered with slot content	Rendered DOM with content
Slot Content	Empty	<h2>Title</h2><p>Some content here.</p>	<h2>Title</h2><p>Some content here.</p>	Displayed inside card

Key Moments - 2 Insights

Why does the content inside <GenericCard> appear in the final output?

Because Vue replaces the <slot> placeholder inside GenericCard with the passed children content, as shown in execution_table step 3.

What happens if no content is passed inside <GenericCard>?

The slot remains empty or shows default slot content if defined, so the rendered output will not have custom content, as implied by the empty Slot Content in variable_tracker start.

Visual Quiz - 3 Questions

Look at the execution table, what is the Slot Content at Step 2?

A <h2>Title</h2><p>Some content here.</p>

B None yet

C Empty string

D <div class='card'></div>

💡 Hint

Check the Slot Content column at Step 2 in the execution_table.

At which step does Vue replace the <slot> with the passed content?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Action and Rendered Output columns in execution_table for when slot content appears.

If no children are passed inside <GenericCard>, what will the final Rendered Output show?

A The passed children content

B The card with default slot content or empty slot

C An error message

D Nothing renders

💡 Hint

Refer to key_moments about what happens if no content is passed.

Concept Snapshot

Generic components in Vue use <slot> to accept any child content.
You define a generic component with <slot> as a placeholder.
When used, Vue replaces <slot> with passed children.
This allows reuse with different content inside.
If no content is passed, slot is empty or shows default.
Slots enable flexible, reusable UI pieces.

Full Transcript

Generic components in Vue let you create reusable UI blocks that accept different content. You define a component with a <slot> tag as a placeholder. When you use this component and put content inside its tags, Vue replaces the <slot> with that content during rendering. This way, the same component can show different things depending on what you pass in. If you don't pass any content, the slot stays empty or shows default content if you set it. This makes your UI flexible and easy to maintain.

Practice

1. What is the main benefit of using generic components in Vue?

easy

A. They allow reusing one component for different data types.

B. They automatically style components without CSS.

C. They replace the need for Vue Router.

D. They make components load faster by default.

Solution

1. Step 1: Understand generic components purpose

   Generic components are designed to be reusable with different data types, so you don't rewrite similar components for each type.

2. Step 2: Compare options to this purpose

   Options B, C, and D describe unrelated features. Only They allow reusing one component for different data types. matches the core benefit of generic components.

3. Final Answer:

   They allow reusing one component for different data types. -> Option A

4. Quick Check:

   Generic components = reuse for many data types [OK]

Hint: Generic means reusable for many types, not styling or routing [OK]

Common Mistakes:

• Confusing generic components with styling features
• Thinking generic components handle routing
• Assuming generic components improve load speed automatically

2. Which syntax correctly defines props with a generic type in a Vue 3 component using TypeScript?

easy

A. const props = defineProps(['item']);

B. const props = defineProps<{ item: T }>();

C. const props = defineProps<T>();

D. const props = defineProps({ item: String });

Solution

1. Step 1: Recall TypeScript generic prop syntax in Vue

   Using defineProps with a generic type requires specifying the prop shape with a type parameter, like { item: T }.

2. Step 2: Analyze each option

   const props = defineProps<{ item: T }>(); correctly uses defineProps<{ item: T }>(). const props = defineProps<T>(); misses the prop shape object. const props = defineProps(['item']); uses string array syntax, not generic. const props = defineProps({ item: String }); uses a fixed type, not generic.

3. Final Answer:

   const props = defineProps<{ item: T }>(); -> Option B

4. Quick Check:

   Generic props need object shape with type parameter [OK]

Hint: Generic props need object shape with type parameter in defineProps [OK]

Common Mistakes:

• Using array syntax instead of type object for generic props
• Omitting the prop shape object in defineProps
• Using fixed types instead of generics

3. Given this generic Vue component snippet, what will be the rendered output if item is a string "Hello"?

const props = defineProps<{ item: T }>();
const item = props.item;
return <div>{typeof item}: {item}</div>;

medium

A. Runtime error due to missing type

B. <div>object: Hello</div>

C. <div>number: Hello</div>

D. <div>string: Hello</div>

Solution

1. Step 1: Understand the typeof operator on the prop

   The typeof operator returns the type of the value at runtime. Since item is "Hello", a string, typeof item is "string".

2. Step 2: Determine the rendered output

   The returned JSX renders a div with text: "string: Hello".

3. Final Answer:

   <div>string: Hello</div> -> Option D

4. Quick Check:

   typeof 'Hello' = string, so output matches [OK]

Hint: typeof a string value returns 'string' in output [OK]

Common Mistakes:

• Confusing typeof result with the value itself
• Expecting object or number type for string value
• Assuming runtime error without type issues

4. Identify the error in this generic Vue component code:

const props = defineProps<{ item: T }>();
const item = props.item;
console.log(item.value);

medium

A. Accessing value assumes item is a ref, but it may not be.

B. Missing import of defineProps causes syntax error.

C. Generic type T must be declared before use.

D. Props must be defined as an array, not an object.

Solution

1. Step 1: Analyze usage of item.value

   Accessing value is valid only if item is a Vue ref. The generic type T could be any type, so item might not have value.

2. Step 2: Check other options

   Missing import of defineProps causes syntax error. is incorrect because defineProps is globally available in Vue SFCs. Generic type T must be declared before use. is incorrect because T is assumed declared in the generic context. Props must be defined as an array, not an object. is wrong because props can be defined as an object type.

3. Final Answer:

   Accessing value assumes item is a ref, but it may not be. -> Option A

4. Quick Check:

   Accessing .value requires ref type, generic may not be ref [OK]

Hint: Only refs have .value; generics may be plain values [OK]

Common Mistakes:

• Assuming generic type is always a ref
• Thinking defineProps needs import in SFC
• Believing props must be array, not object

5. You want to create a generic Vue component that accepts a list of items of any type and renders each item with a slot. Which approach correctly applies generics and slots together?

hard

A. Use defineProps(['items']) and render items directly without slots.

B. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component.

C. Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop.

D. Use defineProps<{ items: T }>() and render items without looping.

Solution

1. Step 1: Define generic props for list of items

   Using defineProps<{ items: T[] }>() correctly types the prop as an array of generic type T.

2. Step 2: Use slots with v-for to render each item

   Passing each item as a slot prop allows flexible rendering by the parent component, which is the correct pattern for generic components with slots.

3. Step 3: Evaluate other options

   Use defineProps(['items']) and render items directly without slots. lacks generics and slots. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component. uses any losing type safety and hardcodes rendering. Use defineProps<{ items: T }>() and render items without looping. uses T instead of T[] and misses looping.

4. Final Answer:

   Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. -> Option C

5. Quick Check:

   Generic list + slot with v-for = Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. [OK]

Hint: Generic list props need array type and slot with v-for [OK]

Common Mistakes:

• Using single item type instead of array for list props
• Not using slots for flexible item rendering
• Hardcoding rendering inside generic component