Vue Slots

Slots allow a parent component to inject HTML content into a child component's template — enabling flexible, reusable layout components.

Default Slot

<!-- Card.vue -->
<template>
  <div class="card">
    <slot />  <!-- parent content goes here -->
  </div>
</template>

<!-- Usage -->
<Card>
  <h2>Hello!</h2>
  <p>Some content.</p>
</Card>

Named Slots

<!-- Modal.vue -->
<template>
  <div class="modal">
    <header><slot name="header" /></header>
    <main><slot /></main>       <!-- default slot -->
    <footer><slot name="footer" /></footer>
  </div>
</template>

<!-- Usage -->
<Modal>
  <template #header>
    <h2>Confirm Action</h2>
  </template>

  <p>Are you sure you want to delete this item?</p>

  <template #footer>
    <button @click="cancel">Cancel</button>
    <button @click="confirm">Delete</button>
  </template>
</Modal>

Scoped Slots — Passing Data Up

<!-- DataList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index" />
    </li>
  </ul>
</template>

<!-- Usage -->
<DataList :items="users">
  <template #default="{ item, index }">
    <span>{{ index + 1 }}. {{ item.name }}</span>
  </template>
</DataList>