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.