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