Slots for content distribution in Vue

Introduction

Slots let you put custom content inside a component. This helps make components flexible and reusable.

You want to create a button component but let users add their own text or icons inside.

You build a card component and want to allow different content like images, titles, or buttons inside it.

You make a modal dialog and want to let users decide what content shows inside the modal.

You want to create a layout component that wraps content but lets users insert their own sections.

Syntax

Vue

<template>
  <slot></slot>
</template>

The tag is a placeholder where content from the parent component will appear.

If no content is provided, the slot can show default content inside the tag.

Examples

Basic slot: content passed between component tags will appear here.

Vue

<template>
  <slot></slot>
</template>

Slot with default content that shows if no content is passed.

Vue

<template>
  <slot>Default content if none provided</slot>
</template>

Named slots let you place different pieces of content in specific places.

Vue

<template>
  <slot name="header"></slot>
  <slot></slot> <!-- default slot -->
  <slot name="footer"></slot>
</template>

Using named slots from the parent to fill specific parts of the child component.

Vue

<MyComponent>
  <template #header>
    <h1>Title here</h1>
  </template>
  <p>Main content goes here.</p>
  <template #footer>
    <button>Close</button>
  </template>
</MyComponent>

Sample Program

This example shows a Card component with three slots: header, default body, and footer.

The parent App.vue uses named slots to put a title in the header, some text in the body, and a button in the footer.

If any slot content was missing, the card would show its default content instead.

Vue

<!-- Card.vue -->
<template>
  <div class="card">
    <header class="card-header">
      <slot name="header">Default Header</slot>
    </header>
    <section class="card-body">
      <slot>Default body content</slot>
    </section>
    <footer class="card-footer">
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
}
.card-header, .card-footer {
  background-color: #f0f0f0;
  padding: 0.5rem;
  font-weight: bold;
}
.card-body {
  margin: 1rem 0;
}
</style>


<!-- App.vue -->
<template>
  <Card>
    <template #header>
      <h2>Welcome!</h2>
    </template>
    <p>This is the main content inside the card.</p>
    <template #footer>
      <button @click="alert('Clicked!')">Click me</button>
    </template>
  </Card>
</template>

<script setup>
import Card from './Card.vue'
</script>

Important Notes

Slots help keep components flexible by letting users decide what content to show inside.

Named slots let you organize content into different parts of your component.

Always provide default slot content to improve usability if no content is passed.

Summary

Slots let you insert custom content inside components.

Use named slots to place content in specific areas.

Default slot content shows if no content is provided.