Slots for content distribution in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Vue component using slots?

Consider the following Vue component usage:

<BaseLayout>
  <template #header>Header Content</template>
  <template #default>Main Content</template>
  <template #footer>Footer Content</template>
</BaseLayout>

And the BaseLayout component template:

<header><slot name="header">Default Header</slot></header>
<main><slot>Default Main</slot></main>
<footer><slot name="footer">Default Footer</slot></footer>

What will be the rendered output inside the <main> element?

A Default Main

B Main Content

C Header Content

D Footer Content

💡 Hint

Remember that the default slot is used when no name is specified.

The <slot> without a name is the default slot. The content inside <template #default> replaces this slot. So <main> will render 'Main Content'.

📝 Syntax

intermediate

Which option correctly defines a named slot in Vue 3?

Choose the correct syntax to define a named slot called 'sidebar' inside a Vue component template.

A &lt;slot #sidebar&gt;&lt;/slot&gt;

B &lt;slot sidebar&gt;&lt;/slot&gt;

C &lt;slot :name="sidebar"&gt;&lt;/slot&gt;

D &lt;slot name="sidebar"&gt;&lt;/slot&gt;

💡 Hint

Named slots use the name attribute on the <slot> element.

The correct way to define a named slot is using <slot name="slotName">. Other options are invalid syntax.

❓ state_output

advanced

What is the output when using scoped slots with props?

Given the following parent component usage:

<UserCard>
  <template #default="{ user }">
    <p>Name: {{ user.name }}</p>
  </template>
</UserCard>

And the UserCard component template:

<slot :user="{ name: 'Alice' }">No user</slot>

What will be rendered inside the UserCard?

A <p>Name: {{ user.name }}</p>

B No user

C <p>Name: Alice</p>

D Error: user is undefined

💡 Hint

Scoped slots pass data from child to parent via slot props.

The slot passes an object with user.name = 'Alice'. The parent template uses this prop to render the name.

🔧 Debug

advanced

Why does this slot content not render as expected?

Consider this parent usage:

<Modal>
  <template #header>
    Modal Header
    <p>Modal Body</p>
  </template>
</Modal>

And the Modal component template:

<div class="modal">
  <header><slot name="header">Default Header</slot></header>
  <main><slot>Default Body</slot></main>
</div>

Why is <p>Modal Body</p> not rendered inside <main>?

A Because the &lt;p&gt; element is not inside a &lt;template #default&gt; slot wrapper

B Because the Modal component does not define a default slot

C Because the slot name 'default' is missing on the &lt;p&gt; element

D Because named slots cannot be mixed with default slot content

💡 Hint

Default slot content must be wrapped in a <template> with no name or #default.

Only content inside a <template #default> or direct children without a slot name are passed to the default slot. Plain elements outside templates are treated as normal children and ignored by slots.

🧠 Conceptual

expert

How does Vue 3's new syntax improve content distribution?

Vue 3 introduced changes to slot syntax and usage. Which statement best describes a key improvement in Vue 3 slots compared to Vue 2?

A Vue 3 allows multiple root nodes inside slot content without wrapping elements

B Vue 3 requires all slots to be named explicitly, removing default slots

C Vue 3 slots no longer support passing props from child to parent

D Vue 3 slots must be declared inside the script setup block

💡 Hint

Think about how Vue 3 improved template flexibility.

Vue 3 supports fragments, so slot content can have multiple root nodes without extra wrappers, making templates cleaner and more flexible.

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