What Is a Named Slot in Vue?

In Vue, a "named slot" lets a component receive different pieces of content. Regular slots pass content between components; named slots do the same in a more organised and controlled way.

When you want to put specific content into several slots of a component, you give each slot a name and decide which content goes where. This is especially helpful for keeping content organised in complex components. For example:

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Custom content for the header</h1>
    </template>

    <template v-slot:default>
      <p>Content for the default slot</p>
    </template>

    <template v-slot:footer>
      <footer>Custom content for the footer</footer>
    </template>
  </ChildComponent>
</template>

Here ChildComponent has three named slots (header, default, footer). The parent fills each of them using <template v-slot:slot_name>, and ChildComponent decides where each slot's content appears.

The ChildComponent that defines these slots looks like this:

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

A <slot> without a name is the "default" slot. As a shorthand, #header can be written instead of v-slot:header.