Vue Academy · Lesson

Slots and Scoped Slots

Compose flexible components using slots and scoped slots.

Lesson 3 of 313 steps

Slots and Scoped Slots is a free Vue Academy lesson on CoddyKit. This is lesson 3 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 3 lessons in total.

What Are Slots?

Slots let a parent inject content into a child component template.

Props pass data; slots pass markup
Great for layout wrappers, cards, modals
The child decides where the content goes

The Default Slot

A child defines a placeholder with the slot element. Whatever the parent puts inside the tags fills it.

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Using the Default Slot

The parent passes content between the component tags.

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

Fallback Slot Content

A slot can provide fallback content shown when the parent passes nothing.

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

Multiple Named Slots

Named slots let a component expose several insertion points.

<!-- Layout.vue -->
<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

Filling Named Slots

The parent targets a named slot with v-slot:name on a template tag.

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

v-slot Shorthand

v-slot has a shorthand: the # symbol.

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

Scoped Slots

Scoped slots let the child pass data up to the slot content.

The child binds data on the slot element
The parent receives it as slot props
Useful when the child controls the data but the parent controls the look

Exposing Data from a Child

The child binds attributes on the slot to share data.

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

Consuming Scoped Slot Data

The parent receives the data through v-slot.

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

When to Use Each Slot

Quick guide:

Default slot for simple content injection
Named slots for multiple regions (layout)
Scoped slots when the parent needs the child internal data

Quick Check

Test your understanding of slots.

Answer it in the interactive lesson

Recap: Slots

You learned content distribution with slots:

Default slot injects markup from the parent
Fallback content shows when nothing is passed
Named slots (v-slot:name, shorthand #) target regions
Scoped slots pass child data up to slot content

Next: reactivity fundamentals.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Slots and Scoped Slots” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Slots and Scoped Slots”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 3 lessons in total.

What will I learn in “Slots and Scoped Slots”?

Compose flexible components using slots and scoped slots. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 3.

How long does the “Slots and Scoped Slots” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy