Vue Slots Explained — Content Distribution with Slots

In this tutorial, you will learn about Vue Slots Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue slots allow components to receive and render content from their parent, enabling powerful composition patterns with the slot element as an outlet for distributed content.

What You'll Learn

• Default slot content
• Named slots for multiple outlets
• Scoped slots passing data
• Slot props and destructuring
• Dynamic slot names

Why It Matters

Slots make components reusable and flexible. Layout components, data providers, and wrapper components use slots to let parents control rendering while the component controls structure.

<template>
  <Card>
    <template #header>
      <h2>User Profile</h2>
    </template>

    <template #default>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </template>

    <template #footer>
      <button @click="edit">Edit</button>
    </template>
  </Card>
</template>

<script setup>
const user = { name: "Alice", email: "alice@example.com" };
</script>

<!-- Card.vue -->
<template>
  <div class="card">
    <header><slot name="header" /></header>
    <main><slot /></main>
    <footer><slot name="footer" /></footer>
  </div>
</template>

Expected output: The Card component renders header, default content, and footer sections from parent-provided slot content.