Vue Slots
Vue Slots
They make components flexible, reusable, and layout-friendly.
What are Vue Slots?
Slots act as placeholders inside a child component where parent-provided content is rendered.
Think of slots as:
“This part of the component will be filled by the parent.”
Default Slot (Basic Slot)
Child Component
Parent Component
- Everything inside
<Card>...</Card>is injected into<slot>
Slot with Fallback Content
Displayed when no content is passed.
Named Slots
Used when a component has multiple content areas.
Child Component
Parent Component
#headerand#footermap to named slots- Default slot used for main content
Scoped Slots (Slot Props)
Allow the child to send data to the parent slot.
Child Component
Parent Component
- Parent can access child data safely
Scoped Named Slots
Slots vs Props (Important)
| Feature | Slots | Props |
|---|---|---|
| Purpose | Pass HTML/UI | Pass data |
| Direction | Parent → Child | Parent → Child |
| Flexibility | High | Medium |
| Use case | Layout & structure | Configuration |
- Props → data
- Slots → content/layout
Common Use Cases
Cards
Modals
Layouts
Tables
Lists
UI libraries
Common Mistakes
- Overusing props instead of slots
- Forgetting slot fallback
- Confusing slot scope direction
- Too many named slots
Best Practices
- Use default slot for main content
- Use named slots for layout areas
- Use scoped slots for flexibility
- Keep slot APIs simple
- Document slot usage
Summary Table
| Slot Type | Syntax |
|---|---|
| Default | <slot /> |
| Named | <slot name="header" /> |
| Scoped | <slot :data="value" /> |
| Named scoped | <template #name="{ data }"> |
| Fallback | <slot>Default</slot> |
Conclusion
Vue slots are essential for building flexible and reusable components.
They separate structure (component) from content (parent)—a key idea in scalable Vue apps.
