Slot

We can access template content of a component by using <slot> as an outlet for template content. Rendered DOM:

<button class="fancy-btn">Click me!</button>

Fallback content

By passing the content between <slot>. It will behave as a fallback content if component doesn't have template content.

<button type="submit">
  <slot>
    Submit <!-- fallback content -->
  </slot>
</button>

Named slots

By naming slots, we can hold multiple templates and have different outlets for it. Example: Parent template

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

BaseLayout component template

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