Slots

Slots allow for content to be passed to a child component.

<bs-button>
  Click me! <!-- slot content -->
</bs-button>

The <slot> element indicates where the slot content should go.

app.component('bs-button', {
  template: `
    <button class="btn btn-primary">
      <slot></slot> <!-- slot outlet --->
    </button>
  `
})

Try it yourself on CodePen

Fallback Content

It is possible to set default content for a slot if no content is provided to the child component.

app.component('bs-button', {
  template: `
    <button class="btn btn-primary">
      <slot>
        Button <!-- fallback content --->
      </slot>
    </button>
  `
})

Named Slots

Multiple slot outlets can be added to a single component. The <slot> element is then assigned a name attribute, which can be used as a unique ID.

app.component('bs-layout', {
  template: `
    <div class="container">
       <header>
         <slot name="header"></slot>
       </header>
       <main>
         <slot name="main"></slot>
       </main>
    </div>
  `
})

To pass content to a named slot, the <template> element is used with the v-slot directive containing the name of the slot as an argument.

<bs-layout>
  <template v-slot:header>
    <!-- content for header slot --->
  </template>
  <template v-slot:main>
    <!-- content for main slot -->
  </template>
</bs-layout> 

Try it yourself on CodePen