🧩 Vue Named Slots (v-slot) – Organize and Customize Component Content (2025 Guide)

🧲 Introduction – What Are Named Slots in Vue?

In Vue.js, named slots give developers the ability to insert content into specific sections of a component. This is an enhancement over default slots, providing more control and flexibility, especially for layout and component composition.

🎯 In this guide, you’ll learn:

• The syntax of v-slot and how named slots work
• How to pass content into multiple regions of a component
• How to use shorthand and scoped slots with v-slot
• Best practices and common use cases

📘 What Is a Named Slot?

A named slot allows the parent to inject content into a specific slot region in the child component using the name attribute on the <slot> element.

✅ Syntax in Child:

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

✅ Usage in Parent:

<template #header>
  <h1>Welcome!</h1>
</template>

<template #footer>
  <p>Footer content here</p>
</template>

🔧 Using v-slot Directive

In Vue 3, named slots are used via the v-slot directive on <template> tags.

✅ Full Example:

<MyLayout>
  <template v-slot:header>
    <h1>Page Title</h1>
  </template>

  <p>Main content here</p>

  <template v-slot:footer>
    <p>© 2025 Company</p>
  </template>
</MyLayout>

🧱 Creating Named Slots in a Component

✅ LayoutComponent.vue

<template>
  <div class="layout">
    <header><slot name="header" /></header>
    <main><slot /></main> <!-- default slot -->
    <footer><slot name="footer" /></footer>
  </div>
</template>

This allows the parent component to inject content into three distinct areas: header, main, and footer.

🎯 Default Slot + Named Slots

You can use both types in the same component:

<slot name="title" />
<slot /> <!-- default content -->
<slot name="actions" />

🔁 Shorthand Syntax for v-slot

Vue allows a shorthand for v-slot using #:

<template #header><h1>Title</h1></template>
<template #default><p>Body text</p></template>
<template #footer><p>Footer</p></template>

🧠 # is equivalent to writing v-slot:name.

🧬 Real-World Example – Card with Named Slots

✅ CardComponent.vue

<template>
  <div class="card">
    <header><slot name="title"></slot></header>
    <section><slot></slot></section>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

✅ Parent Usage:

<CardComponent>
  <template #title>
    <h2>Card Title</h2>
  </template>

  <p>This is the card body.</p>

  <template #footer>
    <button>Confirm</button>
  </template>
</CardComponent>

🧠 This pattern gives component users the power to define their own content in each area.

🔄 Dynamic Content with Named Slots

Named slots are often used in:

• Layout systems
• Tab components
• Cards and panels
• Dialogs and modals

🚫 Common Mistakes to Avoid

❌ Mismatched slot names
✅ Use matching names in child <slot name="x" /> and parent v-slot:x

❌ Misplaced default slot content
✅ Use default content outside of v-slot templates

❌ Mixing named slot with static content
✅ Keep dynamic slots inside <template v-slot:name>

📌 Summary – Recap & Next Steps

Vue named slots let you build powerful and flexible component interfaces by allowing parents to define what appears where. They’re essential for building customizable and scalable UIs.

🔍 Key Takeaways:

• Use v-slot:name to target a named <slot> in child
• Default slot can coexist with named slots
• Use #name as shorthand for v-slot:name
• Enable dynamic layout creation in reusable components

⚙️ Real-World Relevance:
Named slots are perfect for dashboards, modals, card layouts, form wrappers, and admin panels.

❓ FAQ Section

❓ What is a named slot in Vue?

✅ A named slot is a <slot> in a component template with a name attribute. It allows targeted content injection from the parent.

❓ How do I use the v-slot directive?

✅ Use it on a <template> inside the parent:

<template v-slot:header>Header Content</template>

❓ Can I use default and named slots together?

✅ Yes. The unnamed <slot> acts as the default, and named slots are handled separately.

❓ What is the shorthand for v-slot:name?

✅ Use #name, like this:

<template #footer><p>Footer text</p></template>

❓ Can I use scoped data with named slots?

✅ Yes, named slots can be scoped just like default slots using v-slot:name="slotProps".