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".