Reusable component checklist

If you are building a component for others to use, there are certain principles that apply, such as high cohesion. In this recipe, you will build a toy component that will illustrate some principles of re-usability.

Getting ready

This recipe is a wrap up of good engineering techniques for building a component. It does not require specific skills but assumes that you already know a thing or two about components.

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