Vue.js Slots

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 120+ pages ebook about the Vue fundamentals tomorrow!

A component can choose to define its content entirely, like in this case:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

or it can also let the parent component inject any kind of content into it, by using slots.

What’s a slot?

You define it by putting <slot></slot> in a component template:

Vue.component('user-information', {
  template: '<div class="user-information"><slot></slot></div>'
})

When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:

<user-information>
  <h2>Hi!</h2>
  <user-name name="Flavio">
</user-information>

If you put any content side the <slot></slot> tags, that serves as the default content in case nothing is passed in.

A complicated component layout might require a better way to organize content.

Enter named slots.

With a named slot you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.

Anything outside any template tag is added to the main slot.

For convenience I use a page single file component in this example:

<template>
  <div>
    <main>
      <slot></slot>
    </main>
    <sidebar>
      <slot name="sidebar"></slot>
    </sidebar>
  </div>
</template>


<page>
  <ul slot="sidebar">
    <li>Home</li>
    <li>Contact</li>
  </ul>

  <h2>Page title</h2>
  <p>Page content</p>
</page>

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 120+ pages ebook about the Vue fundamentals tomorrow!