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.