Named slots in Vue js

1. Overview

In this article, we will learn about Named slots in Vue js.

2. Slots in Vue Js

A slot allows a parent component to define an injectable slice of HTML and inject or place it somewhere in a child component.

Just like props, which can pass JavaScript values of any type to the child component, a slot can help to pass template content \ fragment to the child component and let the child component render the fragment within its own template.

3. Named slots in Vue js

Named slots are useful when you want to display multiple fragments in a single child component. For example, in a <BaseLayout> child component with the following template:

<div class="container">
  <header>
    <!-- We want header content here -->
  </header>
  <main>
    <!-- We want main content here -->
  </main>
  <footer>
    <!-- We want footer content here -->
  </footer>
</div>

In these cases, the <slot> element has a special attribute, name, for which you can assign a unique ID.

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

A <slot> outlet without name implicitly having the name “default”.

In a parent component using <BaseLayout>, we need to pass multiple slot content fragments, each targeting a different slot outlet. This is where named slots come in.

To pass a named slot, we need to use a <template> element with the v-slot directive, and then pass the name of the slot as an argument to v-slot:

<BaseLayout>
  <template v-slot:header>
    <!-- content for the header slot -->
  </template>
</BaseLayout>

In 2.6.0, Vue js introduced a new unified syntax (the v-slot directive) for named slots. It replaces the slot and slot-scope attributes, which are deprecated in v2.6+ and removed in Vue 3.

 
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

v-slot has a dedicated shorthand #, so <template v-slot:header> can be shortened to just <template #header>. Think of it as “render this template fragment in the child component’s ‘header’ slot”.

When a component accepts both a default slot and named slots, all top-level non-<template> nodes are implicitly treated as content for the default slot.

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <!-- implicit default slot -->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

Now, Vue js passes everything inside the <template> elements to the corresponding slots. The final rendered HTML will be:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

4. Conclusion

To sum up, we have learned named slots in Vue js.