Slots for content distribution in Vue

Introduction

Slots let you put custom content inside a component. This helps make components flexible and reusable.

You want to create a button component but let users add their own text or icons inside.

You build a card component and want to allow different content like images, titles, or buttons inside it.

You make a modal dialog and want to let users decide what content shows inside the modal.

You want to create a layout component that wraps content but lets users insert their own sections.

Syntax

Vue

<template>
  <slot></slot>
</template>

The tag is a placeholder where content from the parent component will appear.

If no content is provided, the slot can show default content inside the tag.

Examples

Basic slot: content passed between component tags will appear here.

Vue

<template>
  <slot></slot>
</template>

Slot with default content that shows if no content is passed.

Vue

<template>
  <slot>Default content if none provided</slot>
</template>

Named slots let you place different pieces of content in specific places.

Vue

<template>
  <slot name="header"></slot>
  <slot></slot> <!-- default slot -->
  <slot name="footer"></slot>
</template>

Using named slots from the parent to fill specific parts of the child component.

Vue

<MyComponent>
  <template #header>
    <h1>Title here</h1>
  </template>
  <p>Main content goes here.</p>
  <template #footer>
    <button>Close</button>
  </template>
</MyComponent>

Sample Program

This example shows a Card component with three slots: header, default body, and footer.

The parent App.vue uses named slots to put a title in the header, some text in the body, and a button in the footer.

If any slot content was missing, the card would show its default content instead.

Vue

<!-- Card.vue -->
<template>
  <div class="card">
    <header class="card-header">
      <slot name="header">Default Header</slot>
    </header>
    <section class="card-body">
      <slot>Default body content</slot>
    </section>
    <footer class="card-footer">
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
}
.card-header, .card-footer {
  background-color: #f0f0f0;
  padding: 0.5rem;
  font-weight: bold;
}
.card-body {
  margin: 1rem 0;
}
</style>


<!-- App.vue -->
<template>
  <Card>
    <template #header>
      <h2>Welcome!</h2>
    </template>
    <p>This is the main content inside the card.</p>
    <template #footer>
      <button @click="alert('Clicked!')">Click me</button>
    </template>
  </Card>
</template>

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

Important Notes

Slots help keep components flexible by letting users decide what content to show inside.

Named slots let you organize content into different parts of your component.

Always provide default slot content to improve usability if no content is passed.

Summary

Slots let you insert custom content inside components.

Use named slots to place content in specific areas.

Default slot content shows if no content is provided.

Practice

1. What is the main purpose of slots in Vue components?

easy

A. To define component data properties

B. To handle component lifecycle events

C. To insert custom content inside a component from its parent

D. To style components with CSS

Solution

1. Step 1: Understand slot usage

   Slots allow a parent component to pass custom content into a child component's template.

2. Step 2: Differentiate from other features

   Slots are not for data, lifecycle, or styling but for content distribution.

3. Final Answer:

   To insert custom content inside a component from its parent -> Option C

4. Quick Check:

   Slots = custom content insertion [OK]

Hint: Slots let parents insert content inside child components [OK]

Common Mistakes:

• Confusing slots with data properties
• Thinking slots handle lifecycle events
• Assuming slots are for styling

2. Which of the following is the correct syntax to define a named slot called header in a Vue component?

easy

A. <template slot="header"></template>

B. <slot name="header"></slot>

C. <slot>header</slot>

D. <named-slot name="header"></named-slot>

Solution

1. Step 1: Recall named slot syntax

   Named slots use <slot name="slotName"></slot> inside the child component.

2. Step 2: Check options for correct syntax

   <slot name="header"></slot> matches the correct Vue syntax for named slots.

3. Final Answer:

   <slot name="header"></slot> -> Option B

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Writing header which is incorrect
• Inventing tags like

3. Given this parent and child component usage:

<ChildComponent>
  <template #header>Header Content</template>
  Default Content
</ChildComponent>

And the child template:

<div>
  <header><slot name="header">Default Header</slot></header>
  <main><slot>Default Content</slot></main>
</div>

What will be rendered inside the <header> and <main> tags?

medium

A. Header Content inside <header>, Default Content inside <main>

B. Default Header inside <header>, Default Content inside <main>

C. Header Content inside <header>, Default Content inside <main> replaced by nothing

D. Default Header inside <header>, Default Content inside <main> replaced by nothing

Solution

1. Step 1: Identify slot content passed from parent

   The parent provides content for the named slot "header" and default slot content "Default Content".

2. Step 2: Match slots in child template

   The named slot "header" receives "Header Content" overriding default header text. The default slot receives "Default Content" from parent, so default fallback is not used.

3. Final Answer:

   Header Content inside <header>, Default Content inside <main> -> Option A

4. Quick Check:

   Named slot content and default slot content render correctly [OK]

Hint: Named slot content overrides default; default slot uses fallback if empty [OK]

Common Mistakes:

• Assuming default slot content is replaced by nothing
• Confusing named slot fallback with default slot fallback
• Ignoring template #header syntax

4. What is wrong with this child component slot usage?

<div>
  <slot name="footer">Default Footer</slot>
  <slot>Default Content</slot>
</div>

And parent usage:

<ChildComponent>
  <template #foot>Custom Footer</template>
</ChildComponent>

medium

A. The parent uses #foot but child expects slot named "footer"

B. The child has two slots but parent provides content for none

C. The default slot is missing a name attribute

D. Slots cannot have default content inside them

Solution

1. Step 1: Compare slot names between parent and child

   The child expects a named slot "footer" but the parent provides content for "foot" slot, which does not match.

2. Step 2: Understand slot matching behavior

   Because of the name mismatch, the child's "footer" slot will show its default content, and the parent's "foot" slot content is ignored.

3. Final Answer:

   The parent uses #foot but child expects slot named "footer" -> Option A

4. Quick Check:

   Slot names must match exactly [OK]

Hint: Slot names must match exactly between parent and child [OK]

Common Mistakes:

• Assuming default slot must have a name
• Thinking slots cannot have default content
• Ignoring slot name mismatches

5. You want to create a reusable Card component with three slots: header, body, and footer. The body slot should have default text "No content provided" if empty. Which child component template correctly implements this?

hard

A. <div class="card">
<header><slot name="header"></slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer"></slot></footer>
</div>

B. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body"></slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

C. <div class="card">
<header><slot></slot></header>
<section><slot>No content provided</slot></section>
<footer><slot></slot></footer>
</div>

D. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

Solution

1. Step 1: Check slot names and default content

   The question requires three named slots: header, body, footer. The body slot must have default text "No content provided" if empty.

2. Step 2: Evaluate each option

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   correctly names all slots and provides default content for all, including the body slot with "No content provided".

3. Final Answer:

   Option D correctly implements all named slots with proper default content -> Option D

4. Quick Check:

   Named slots with default fallback text =

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   [OK]

Hint: Use named slots with default text inside slot tags [OK]

Common Mistakes:

• Using unnamed slots for multiple areas
• Missing default content for required slots
• Confusing default slot with named slots