- [Instructor] There are times when we need to extend
the functionality of our app
and one way to do this in Nuxt is by using a Nuxt plugin.
Nuxt plugins are transcript files that you run
before instantiating the roots of Vue application.
This means that any plugin you create
will be imported before the main application starts running.
Nuxt has three different ways you can use a plugin.
You can use it by injecting it in the root
or context of your app,
you can use it with third party libraries as a Vue plugin
and you can use it to extend an external package
or a module you use in your application.
Let's see how the different ways of using a plugin work.
First, by default,
Nuxt does not include the plugin directory,
so you would need to create one.
Inside a plugin directory
is where you add the JavaScript files needed to run a plugin
and Nuxt will automatically load them
before the application starts running.
We have the inject method.
This method is used when you need to make a value
or a function available globally in your app.
Here's an example we have,
this file called welcome.js inside our plugin directory.
And it accepts two parameters,
the roots of the app and an inject method.
Now, this inject method also accepts two parameters,
a key and a value.
In this example, the key here is welcome
and the value here is a console.log message
that gets logged to the console
every time we will call this function.
Now, to use this function, inside the index.vue file,
we can use it in two different ways.
We can use it by calling this.$welcome
and then passing a value,
and that way you are only using it on the client side,
or you can just directly call in the welcome function
and the value,
and this is how you use it on the server side.
So the first is passing it directly to the root of the app
and the second is using it directly in the context,
meaning it's only available on the server side.
Another example is by using a Vue plugin.
And how do you do this?
Typically in a Vue application,
all you need to do is install the Vue plugin
and call the vue.use global method.
But in Nuxt, you would need to actually create a new file
inside the plugin directory.
Let's use another example.
Say we are trying to use the floating-vue package
as a Nuxt plugin.
What we'll need to do is create a new file here
and call it floating-vue.js.
Floating-vue is a Vue library that allows you to add pop ups
or tooltips to your app.
Now, we also need to install it,
and to do that I'll run npm install floating-vue.
I'm installing it as dev dependency
and I'm also using the Vue2 specific version.
So after installing it,
inside the file, I'll import Vue
and also import the library, so floating-vue.
And now to use it, I will call the vue.use global method
and pass in the name of the plugin, which is floating-vue.
Now with this, we have one more step to complete.
Inside the nuxt.config file,
where we have the plugins property on line 27,
we always need to import the name of the plugin file,
otherwise you wouldn't be able to use it.
Remember, I showed you an example from earlier, welcome.js
we also need to import that if we have it in our app.
For this example, I'll import the floating-vue plugins here
and now we can actually start using it.
So if I head into the index.vue file
and I want to create a button
that has like a tooltip on it.
The first thing I'll need to do is
I'll want to wrap this in a div,
so let's do that.
And here, adding a button and call this button.
In order to use the floating-vue tooltip component,
we need to add a v-tooltip directive that takes in a string.
So this string can be 'this is our button' as an example.
Now, if I run our app and check the browser
we should actually see something that looks like a tooltip.
So if I refresh this, so we have that.
But the reason why it's looking very weird
is because I did not install
the CSS that comes with the library.
So floating-vue also has its own CSS
that you need to import where you're using it.
So I'll import the default CSS here.
And now if I go back
and try to hover over this button again
now I see it looking more like a tooltip, right?
So that's how you'd use a Vue plugin
in your Nuxt application.
Finally, we can also use it
as a way of extending the configuration of a Nuxt module
or an external package.
A good example to use is the Axios module,
which is a library for making HTTP requests.
In order to do this, I'll need to create a new file
called axios.js inside the plugins directory.
And what I want to do here is create a default function
that takes in two parameters,
the Axios config and a redirect method.
Now out of the box, when you are using Axios module
you can also set some configuration up.
Here, what I'm doing is, I'm setting up a configuration
that triggers a new redirect
when the API that I'm trying to request data from
returns a 404 error.
So if I try to hit an end point and the response is a 404,
my application should be redirected to a new not-found page.
And that's what this does.
Axios would not do this out of the box for you.
So in order to extend the functionality of a module,
you can create a plugin for it
and add the configuration you need.
And that's another example of how you'd use a Nuxt plugin.
Using plugins with Nuxt is a great way
to add specific functionalities to your app
without the need of actually starting all over
and building it from scratch.