Define and Install a Vue.js Plugin

In this lesson, let's take a look at how to define and register our first custom plugin. js by creating a variable called myFirstPlugin, and we'll make the value an object with an install method on it. This install method is what Vue looks for to run whenever we register our plugin with the app, and it accepts two arguments. The first argument is the Vue application instance.

directive. The second argument provided to install is any options that we want to accept for the plugin. For now, let's just use the install method toConsoleLogHelloPlugin so that we know when our plugin has successfully been installed. And maybe it'd be nice to see the options as well.

Awesome. Let's try opening up the console now to see if our message exists. I'll clear the console. and refresh my app.

Yeah, there are no messages in the console, and this is actually expected. While we've defined our plugin, we haven't actually put it to use yet. So how do we go about registering our plugin with Vue? use method on our Vue app.

mount and not after. melt returns is different. Now we can pass in our plugin. And just like that, we've got our message displaying in the console.

It says hello plugin, and the options are currently undefined. use. And typically these options are going to be an object, like this. Cool.

js plugin. In the coming lessons we'll make things a little more useful. In this lesson, let's take a look at how to define and register our first custom plugin. js by creating a variable called myFirstPlugin, and we'll make the value an object with an install method on it.

This install method is what Vue looks for to run whenever we register our plugin with the app, and it accepts two arguments. The first argument is the Vue application instance. directive. The second argument provided to install is any options that we want to accept for the plugin.

For now, let's just use the install method toConsoleLogHelloPlugin so that we know when our plugin has successfully been installed. And maybe it'd be nice to see the options as well. Awesome. Let's try opening up the console now to see if our message exists.

I'll clear the console. and refresh my app. Yeah, there are no messages in the console, and this is actually expected. While we've defined our plugin, we haven't actually put it to use yet.

So how do we go about registering our plugin with Vue? use method on our Vue app. mount and not after. melt returns is different.

Now we can pass in our plugin. And just like that, we've got our message displaying in the console. It says hello plugin, and the options are currently undefined. use.

And typically these options are going to be an object, like this. Cool. js plugin. In the coming lessons we'll make things a little more useful.