Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

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>

You can change the link to the images of kangaroos with the one you prefer.

In the JavaScript part, we instantiate an empty Vue instance for now:

new Vue({

el: '#app'

})