Writing a plugin for Vue

A plugin is a collection of utilities or a global new behavior that we want in our application. Vuex and vue-router are two famous examples of Vue plugins. A plugin can really be anything, since writing one means acting at a very low level. There are different kinds of plugins you can write. For this recipe, we will concentrate on building a directive with global properties.

Getting ready

This recipe will be based on Creating a new directive, except that we will add some features for global coordination.

How to do it...

For this recipe, we will build a website for a kangaroo appreciation club. The layout of the home page HTML looks like this:

<div id="app">
  <h1>Welcome to the Kangaroo club</h1>
  <img src="https://goo.gl/FVDU1I" width="300px" height="200px">
  <img src="https://goo.gl/U1Hvez" width="300px" height="200px">
  <img src="https://goo.gl/YxggEB" width="300px" height="200px">
  <p>We love kangaroos</p>
</div...