Slots and Flexible Components

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Provide slot content
Use named slots
Receive data through scoped slots

Let's break it down simply

Just as props pass data, slots pass template content. Slots are a great fit for wrapper components like cards, modals, and layouts. Named slots let you split things into header/body/footer, and scoped slots let a child hand its data back to the parent's template.

vue

<!-- BaseCard.vue -->
<template>
  <article class="card">
    <header><slot name="title">Untitled</slot></header>
    <div><slot /></div>
    <footer><slot name="actions" /></footer>
  </article>
</template>

<!-- usage -->
<BaseCard>
  <template #title>Vue Course</template>
  <p>20 practical lessons</p>
  <template #actions><button>Start</button></template>
</BaseCard>

You should see

Vue Course
20 practical lessons
[Start]

Try it yourself

Write a BaseModal component with named slots for header, content, and footer.

Slots — Vue.js

Easy traps

Mixing up what slots are for versus what props are for
Ending up with an empty UI because no fallback content was provided

Exercise

Write a BaseModal component with named slots for header, content, and footer.

You'll know it worked when: Vue Course 20 practical lessons [Start]