jpcasa
12/31/2018 - 3:31 PM

Vue Slots

Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the element to serve as distribution outlets for content.

<navigation-link url="/profile">
  Your Profile
</navigation-link>
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>