Slots for content distribution in Vue - Mini Project: Build & Apply

Slots for Content Distribution in Vue

📖 Scenario: You are building a reusable Card component for a blog website. The card should have a title area and a content area. You want to allow users of the card to insert their own title and content inside the card using Vue slots.

🎯 Goal: Create a Vue component called Card that uses slots to let users insert custom title and content. Then use this component in a parent component, passing different titles and content inside the slots.

📋 What You'll Learn

Create a Card component with two slots: one named title and one default slot for content.

Use the Card component in a parent component and pass custom HTML inside the title slot and default slot.

Ensure the slots render the passed content inside the card layout.

💡 Why This Matters

🌍 Real World

Slots let you build flexible, reusable UI components that can accept different content from their users. This is common in design systems and component libraries.

💼 Career

Understanding slots is essential for Vue developers to create modular and maintainable components that adapt to various use cases.

1

Create the Card component with slots

Create a Vue component called Card with a template that has a <div> with class card. Inside it, add a <header> with a named slot called title and a <section> with a default slot for content. Use <slot name="title">Default Title</slot> and <slot>Default content</slot> exactly.

Vue

  
    
      
    
    
      
    
  



// Your code here

Hint

Use <slot name="title">Default Title</slot> inside the header and <slot>Default content</slot> inside the section.

2

Import and register the Card component

In a parent Vue component, import the Card component from './Card.vue' and register it locally using components. Use the <script setup> syntax and add import Card from './Card.vue' at the top.

Vue

  



// Import Card component here

Hint

Use import Card from './Card.vue' at the top of the script setup block.

3

Use the Card component with slots in the parent template

In the parent component template, add the <Card> component. Inside it, add a <template v-slot:title> with an <h2> containing the text My Blog Post. Also add a paragraph <p> inside the default slot with the text This is the blog post content. Use exactly <template v-slot:title> syntax.

Vue

  
    
    
  



import Card from './Card.vue'

Hint

Use <template v-slot:title> to pass the title slot content and place the paragraph directly inside <Card> for the default slot.

4

Add basic styles to the Card component

In the Card.vue component, add a <style scoped> block. Inside it, add CSS to give the .card class a border of 1px solid #ccc, padding of 1rem, and border-radius of 0.5rem. This will visually separate the card content.

Vue

  
    
      Default Title
    
    
      Default content
    
  



// No script needed for this step



/* Add styles for .card here */

Hint

Use a scoped style block and add CSS rules for the .card class as described.

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