Defaults

Whilst we're able to add content into the slots, we may want to add default content that shows when we don't add anything ourselves. This means we don't have to add content every time, and if we want to, we can override it in that circumstance.

How do we add default behavior to our slots? That's quite simple! All we need to do is add our element(s) in between the slot tag like this:

<template>
 <div>
  <h1>I'm part of the Message component!</h1>
  <slot>
   <h2>I'm a default heading that appears <em>only</em> when no slots 
   have been passed into this component</h2>
   </slot>
 </div>
</template>

If we therefore add another message element, but this time without any markup inside, we'd get the following:

<template>
 <div id="app">
  <message>
   <h2>What are you doing today?</h2>
  </message>
  <message>
   <h2>Learning about Slots in Vue.</h2>
  </message>
  <message></message>
 </div>
</template>

Now if we head to our browser we can see that our messages display as expected like so: