How to Use Named Slot in Vue: Syntax and Examples

In Vue, use <slot name="slotName"></slot> inside a child component to define a named slot, and pass content to it from the parent using <template v-slot:slotName>. Named slots let you insert multiple distinct content areas into a component.

Syntax

To use a named slot in Vue, define it in the child component with <slot name="slotName"></slot>. In the parent component, provide content for that slot using <template v-slot:slotName> or the shorthand #slotName.

• Child component: declares where named content will go.
• Parent component: fills the named slot with specific content.

vue

<!-- ChildComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header">Default header</slot>
    </header>
    <main>
      <slot>Default main content</slot>
    </main>
    <footer>
      <slot name="footer">Default footer</slot>
    </footer>
  </div>
</template>

Example

This example shows a parent component passing different content to the named slots header and footer of a child component, while the default slot is also used.

vue

<!-- ChildComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header">Default header</slot>
    </header>
    <main>
      <slot>Default main content</slot>
    </main>
    <footer>
      <slot name="footer">Default footer</slot>
    </footer>
  </div>
</template>

<script setup>
// No script needed for this example
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Custom Header Content</h1>
    </template>

    <p>This is the main content passed to the default slot.</p>

    <template v-slot:footer>
      <small>Custom Footer Content</small>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

Output

<header><h1>Custom Header Content</h1></header><main><p>This is the main content passed to the default slot.</p></main><footer><small>Custom Footer Content</small></footer>

Common Pitfalls

• Forgetting to use v-slot or its shorthand # in the parent to target the named slot.
• Using the wrong slot name in the parent that does not match the child's name attribute.
• Placing content for named slots directly inside the child component tags without wrapping in <template v-slot:name>, which will not work.

vue

<!-- Wrong usage in parent: -->
<ChildComponent>
  <h1>Header content</h1> <!-- This goes to default slot, not named 'header' -->
</ChildComponent>

<!-- Correct usage: -->
<ChildComponent>
  <template v-slot:header>
    <h1>Header content</h1>
  </template>
</ChildComponent>

Quick Reference

Concept	Syntax Example	Description
Define named slot in child		Placeholder for named content from parent
Use named slot in parent		Pass content to named slot
Default slot		Content without a name goes here
Shorthand for v-slot	#header	Shorter syntax for named slot usage

Key Takeaways

Use in child to define named slots.

Pass content to named slots in parent with