Named slots and scoped slots in Vue

Introduction

Named slots let you put different content in specific places inside a component. Scoped slots let the component share data with the content you put inside it.

You want to create a reusable card component with separate header, body, and footer areas.

You need to pass data from a list component to customize how each item looks.

You want to build a modal where the title and buttons can be different each time.

You want to let users customize parts of a component but still keep control over layout.

Syntax

Vue

<template>
  <slot name="slotName">Default content</slot>
</template>

<!-- Using named slot -->
<ChildComponent>
  <template #slotName>
    Custom content here
  </template>
</ChildComponent>

<!-- Scoped slot syntax -->
<ChildComponent>
  <template #slotName="slotProps">
    {{ slotProps.someData }}
  </template>
</ChildComponent>

Named slots use the name attribute to identify different slots.

Scoped slots pass data from the child component to the parent using slot props.

Examples

This component has three slots: named slots for header and footer, and a default slot for the main content.

Vue

<!-- ChildComponent.vue -->
<template>
  <header><slot name="header">Default Header</slot></header>
  <main><slot>Default Body</slot></main>
  <footer><slot name="footer">Default Footer</slot></footer>
</template>

Here, we fill the named slots with custom content and use the default slot for the main body.

Vue

<!-- Using ChildComponent with named slots -->
<ChildComponent>
  <template #header>
    <h1>My Custom Header</h1>
  </template>
  <p>This is the main body content.</p>
  <template #footer>
    <small>Custom footer text</small>
  </template>
</ChildComponent>

The child component passes itemText to the slot as a prop named text.

Vue

<!-- ChildComponent.vue with scoped slot -->
<template>
  <slot name="item" :text="itemText"></slot>
</template>

<script setup>
const itemText = 'Hello from child'
</script>

The parent receives the text from the child and displays it inside the slot content.

Vue

<!-- Using scoped slot -->
<ChildComponent>
  <template #item="{ text }">
    <p>Received: {{ text }}</p>
  </template>
</ChildComponent>

Sample Program

This example shows a card component with named slots for header and footer. The parent fills these slots with custom content and uses the default slot for the main body.

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: #f0f0f0; padding: 0.5rem; }
.card-body { padding: 1rem 0; }
</style>


<!-- App.vue -->
<template>
  <Card>
    <template #header>
      <h2>Welcome!</h2>
    </template>

    <p>This is the main card content.</p>

    <template #footer>
      <button @click="alert('Clicked!')">Click me</button>
    </template>
  </Card>
</template>

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

Important Notes

Always provide default slot content to keep your component usable without custom slots.

Use v-bind or : to pass multiple props in scoped slots.

Named slots help organize complex components with multiple customizable parts.

Summary

Named slots let you put different content in specific places inside a component.

Scoped slots let the child component share data with the slot content.

Use named and scoped slots to build flexible, reusable Vue components.

Practice

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

easy

A. To handle component lifecycle hooks

B. To share data from parent to child components

C. To create reactive state inside a component

D. To place different content in specific parts of a component

Solution

1. Step 1: Understand named slots concept

   Named slots allow you to define multiple placeholders inside a component where different content can be inserted.

2. Step 2: Identify the purpose of named slots

   They help organize content by placing it in specific parts of the component template.

3. Final Answer:

   To place different content in specific parts of a component -> Option D

4. Quick Check:

   Named slots = specific content placement [OK]

Hint: Named slots = different content in specific places [OK]

Common Mistakes:

• Confusing named slots with props
• Thinking named slots share data
• Mixing named slots with lifecycle hooks

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall named slot syntax in Vue

   Named slots are defined using the element with a name attribute.

2. Step 2: Match correct syntax

   The correct syntax is . Other options are invalid or deprecated.

3. Final Answer:

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

4. Quick Check:

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

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Trying to create custom tags like
• Confusing named slots with props

3. Given this parent usage of a scoped slot:

<MyList>
  <template #item="{ item }">
    <li>{{ item.text }}</li>
  </template>
</MyList>

And this child component template:

<ul>
  <slot name="item" :item="listItem"></slot>
</ul>

What will be rendered if listItem is { text: 'Hello' }?

medium

A. Hello

B.

C. {{ item.text }}

D.

Solution

1. Step 1: Understand scoped slot data passing

   The child passes listItem as item to the slot content using :item="listItem".

2. Step 2: Parent uses slot scope to access item.text

   The parent template receives item and renders <li>{{ item.text }}</li>, which becomes <li>Hello</li>.

3. Final Answer:

   <ul><li>Hello</li></ul> -> Option A

4. Quick Check:

   Scoped slot passes data = rendered content [OK]

Hint: Scoped slots pass data object to slot content [OK]

Common Mistakes:

• Ignoring the slot scope and expecting raw slot tags
• Not using the slot props correctly in parent
• Confusing named slots with scoped slots

4. Identify the error in this Vue component usage:

<MyComponent>
  <template slot="footer">Footer Content</template>
</MyComponent>

Assuming MyComponent defines a named slot footer using <slot name="footer">.

medium

A. Missing v-slot directive on template

B. Using deprecated slot attribute instead of #footer shorthand

C. Named slot must be inside MyComponent template, not usage

D. No error, this is correct syntax

Solution

1. Step 1: Check slot syntax in Vue 3

   The slot attribute on template is deprecated in Vue 3.

2. Step 2: Identify correct syntax for named slots

   Use v-slot:footer or shorthand #footer instead of slot="footer".

3. Final Answer:

   Using deprecated slot attribute instead of #footer shorthand -> Option B

4. Quick Check:

   Use v-slot or # for named slots [OK]

Hint: Use v-slot or #, not slot attribute [OK]

Common Mistakes:

• Using old slot attribute syntax
• Confusing slot definition with slot usage
• Thinking no syntax change in Vue 3

5. You want to create a reusable Card component with named slots for header, body, and footer. The body slot should receive a scoped prop info from the component. Which is the correct way to define the Card template?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify named slots and scoped props

   The body slot must receive the scoped prop info from the component's data.

2. Step 2: Check slot definitions

   Only the body slot has :info='cardInfo' to pass the scoped prop. The others are simple named slots without props.

3. Final Answer:

   Correct template with named slots and scoped prop on body slot -> Option A

4. Quick Check:

   Scoped prop on body slot only [OK]

Hint: Pass scoped props only on slots needing data [OK]

Common Mistakes:

• Passing scoped props on wrong slots
• Missing scoped prop on body slot
• Using default slot instead of named slots