Skip to content
\n\n\n\n\n","url":"https://ez4code.com/snippets/vue3-slots","keywords":"slots, content-distribution","author":{"@type":"Person","name":"EZ4Code Team"},"publisher":{"@type":"Organization","name":"EZ4Code","logo":{"@type":"ImageObject","url":"https://ez4code.com/logo.png"}},"datePublished":"2024-01-01","dateModified":"2026-08-01","image":"https://ez4code.com/og-image.png"}
Vue 3

Slots & Scoped Slots

Distribute content with default, named, and scoped slots.

By EZ4Code Team
slotscontent-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>
-->

Explanation

Slots let a parent inject content into a child component's layout. Named slots (#header) target specific positions, while scoped slots pass data back up via slot props. Default slot content fills any unnamed <slot />.

More Vue 3 Snippets

Single-File Component

Define a Vue 3 component with script setup, template, and scoped styles.

Composition API

Organize reactive state, computed, and lifecycle logic by feature.

Refs & Reactive

Choose between ref and reactive for reactive state.

Computed & Watch

Derive values with computed and react to changes with watch.

Props & Emits

Declare inputs and events, and implement v-model on a component.

Lifecycle Hooks

Register lifecycle callbacks as composable functions.