Vue.js 2 Cookbook

How to do it...

You will build a generic dialog box. Write the empty component first:

Vue.component('dialog-box', {})

The template will contain a slot for the icon, another slot for the message, and an optional cancel button:

template: ` <div>   <div class="icon">     <slot name="icon"></slot>   </div>   <slot name="message"></slot>   <div class="buttons">     <button v-if="cancellable"             @click="cancel()">       Cancel     </button>     <button @click="ok()">       OK     </button>   </div> </div>`

This way, any user of the dialog box can customize it with the content he wants and can also decide whether the Cancel button is really necessary.

The props are then cancellable and command.  The latter is a string which we’ll return to the user to identify the dialog box: ...