🧩 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
| Do | Don’t |
|---|---|
Use #slotName for named slots | Don’t mix unnamed and named slots carelessly |
| Use fallback content when appropriate | Don’t mutate slot content |
| Keep components small and slot-focused | Avoid hardcoding inner content inside slot containers |
📌 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.
Share Now :
