Slots & Scoped Slots

Distribute content with default, named, and scoped slots.

#slots#content-distribution

Code

<!-- Card.vue -->
<script setup></script>

<template>
  <div class="card">
    <header><slot name="header">Default header</slot></header>
    <main><slot /></main>
    <footer><slot name="footer" :year="2024" /></footer>
  </div>
</template>

<!-- Parent usage -->
<!--
<Card>
  <template #header>Title</template>
  Body content
  <template #footer="{ year }">© {{ year }}</template>
</Card>
-->

All snippets