Slots in Vue.js
From the Vue.js cheat sheet · Advanced Features · verified Jul 2026
Slots
Content distribution with slots
vue
<!-- Parent -->
<Card>
<template #header>
<h1>Title</h1>
</template>
Default slot content
<template #footer>
<p>Footer</p>
</template>
</Card>
<!-- Child (Card.vue) -->
<template>
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
</template>💡 Slots enable flexible component composition
⚡ Scoped slots pass data from child to parent
📌 Use # as shorthand for v-slot:
🔥 $slots object contains all passed slots