Vue Basic Slots – Compose Flexible Components with Content Injection (2025 Guide)

Introduction – What Are Slots in Vue?

In Vue.js, slots are a powerful feature that allows you to pass template content into a child component from the parent. They provide a way to create reusable components that are also highly customizable—perfect for layouts, wrappers, or components that need to inject arbitrary content.

In this guide, you’ll learn:

• What basic slots are and how to use them
• Syntax for default slots and multiple slot regions
• Practical examples for reusability
• Common use cases and best practices

What Is a Basic Slot?

A basic slot allows the parent component to insert HTML or template code into a child component at a specified placeholder.

Basic Syntax in the Child:

<template>
  <div class="wrapper">
    <slot></slot>
  </div>
</template>

This <slot> element acts like a placeholder for content passed by the parent.

Example – Default Slot

Child Component (BaseCard.vue)

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>

Parent Usage

<BaseCard>
  <h2>Hello from Parent</h2>
  <p>This content is injected into the BaseCard.</p>
</BaseCard>

The BaseCard component renders the injected content inside the .card div.

Why Use Slots?

Enable reusable components with customizable content
Simplify layouts with flexible wrappers
Decouple structure from actual content

Multiple Slots with Named Regions

You can create multiple <slot> regions using named slots.

Child Component:

<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</template>

Parent Usage:

<LayoutComponent>
  <template #header><h1>Page Title</h1></template>
  <p>This is the main content area.</p>
  <template #footer><small>© 2025 Company</small></template>
</LayoutComponent>

Slots are matched by their name attributes.

Real-World Example – Button with Icon Slot

Button Component:

<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>

Parent:

<IconButton>
  <template #icon><span></span></template>
  Search
</IconButton>

Allows developers to inject icons, labels, or loaders dynamically.

Fallback Content

You can include default/fallback content inside the <slot> in case no content is passed.

Example:

<slot>Default text if nothing is passed</slot>

Best Practices

Summary – Recap & Next Steps

Vue’s basic slots allow you to create flexible and dynamic components that adapt to varying content. They’re crucial for layouts, wrappers, buttons, modals, and other reusable UI structures.

Key Takeaways:

• Use <slot> in child to define a content placeholder
• Use default and named slots for flexibility
• Provide fallback content if needed
• Combine slots with scoped styling and props for best results

Real-World Relevance:
Slots are ideal for building component libraries, design systems, and content-driven applications.

FAQ Section

What is a slot in Vue?

A slot is a placeholder in a child component that lets the parent inject its own content.

What is the difference between default and named slots?

Default slots use <slot> and are unnamed. Named slots use <slot name="header"> and are targeted using #header.

Can I use multiple slots in one component?

Yes, by naming each slot and using <template #slotName> in the parent.

How do I provide fallback content in a slot?

Place default content inside the <slot> tag:

<slot>Default content</slot>

Do slots affect reactivity?

No. Slot content remains reactive and updates as the parent’s data changes.