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

(singke) #1
Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

If you run your app now, you will see that an image or the text jumps just like a kangaroo


every few seconds.


How it works...


In its essence, a Vue plugin is just a way to group some functionalities. There are not many
restrictions and all you have to do to create a plugin is to declare an install function. The


general syntax to do that is as follows:


MyPlugin.install = (vueInstance, option) => {
// ...
}

To use the plugin you just made, write the following:


Vue.use(MyPlugin, { /* any option you need */ })

Here, the second parameter is the optional object that gets passed to the install function.


Since plugins are global entities, you should use them sparsely and only for features that
you foresee will affect your app throughout.


Rendering a simple component manually


Vue turns your HTML templates into render functions. Usually, you should stick to
templates because they are much simpler. There are a couple of cases in which render


functions become in handy. Here, we show a simple example in which render functions are
useful.


Getting ready


This is the first recipe on render functions. If you already understand the basics of Vue, you


will understand everything.

Free download pdf