Vue.js 2 Design Patterns and Best Practices

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 ...