Vue.js — Content Distribution using Slots

tl;dr;

Using slots will let you “inject” content on a Vue.js Component based on its context. The idea is simple yet powerful.

“This is a process called content distribution (or “transclusion” if you are familiar with Angular). Vue.js implements a content distribution API that is modeled after the current Web Components spec draft, using the special <slot> element to serve as distribution outlets for the original content.” — vuejs.org

Let’s create a Modal Component where we can reuse it throughout any application we’re building.

Modal.vue

<!-- Modal Component -->
  <template>
       <div class="modal">
         <div class="modal-header">
             <slot name="header"></slot>
         </div>
         <div class="modal-body">
             <slot name="body"></slot>
         </div>
         <div class="modal-footer">
             <slot name="footer"></slot>
             <slot>Hello! I'm kinda a "catch"! I will popup when nobody else does.</slot>
         </div>
       </div>
  </template>

So… How can I use it?

  <modal>  
     <span slot="header">Eu sou um header!</span>
     <span slot="body">Eu sou um body!</span>
     <span slot="footer">Eu sou um footer!</span>
  </modal>

Easy! The outcome of the code above (after Vue does it magic) will be:

  <div class="modal">
       <div class="modal-header">
         <span slot="header">Hello! I'm a modal header!</span>
       </div>
       <div class="modal-body">
         <span slot="body">Hello! I'm a modal body!</span>
       </div>
       <div class="modal-footer">
         <span slot="footer">Hello! I'm a modal footer!</span>
       </div>
  </div>

Remember

The statement below will only appears in the outcome IF there’s no slot’s to call OR there’s a “undefined” slot injected.

<!-- ... -->
          <slot>Hello! I'm kinda a "catch"! I will popup when nobody else does.</slot>
<!-- ... -->

Live Example

Just check out this JSFiddle and try it out!

Inspiration

Thank you Tacio Medeiros and Thiago Franca for the great idea.