Vue Academy · Lesson

Slots and Scoped Slots

Compose flexible components using slots and scoped slots.

Slots and Scoped Slots is a free Vue Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Slots and Scoped Slots” lesson free?

Yes — the full text of “Slots and Scoped Slots” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

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