Adding Vue Plugins to your Nuxt APP
Let's use the Vue Tooltip plugin and add it to our Nuxt app so we can have amazing tooltips.
Install the npm package
For this example i am using the latest version of the library. We can install it either using npm or yarn.
yarn add v-tooltip@v2.1.2Create a Nuxt plugin
In order to use Vue plugins we need to create a Nuxt plugin and we do this by creating a .js file in the /plugins folder. We then paste in the code that we need to use the plugin. We import Vue and VTooltip and then tell Vue to use the VTooltip.
import Vue from 'vue'import VTooltip from 'v-tooltip'Vue.use(VTooltip)Register the plugin
Nuxt doesn't automatically register plugins therefore we need to tell Nuxt that the plugin exists. We do this by adding it to the plugins array in our nuxt.config.js file.
plugins: ['~/plugins/v-tooltip.js']Let's add some styles
You can add styles how you wish but the plugin gives us some styles that we can copy directly and add to a .css file which we can put in the assets folder. Then we just have to register the css file by adding it to our Nuxt config.
css: ['~/assets/v-tooltip.css']Use the Plugin
We can now use the plugin in any of our layouts, pages or components by using the tooltip directive. If we add it to the logo then every time someone hovers over our Logo they will get the tooltip with a message saying 'Nuxt is Awesome'
<Logo v-tooltip="Nuxt is Awesome" />
And that's it. The library itself allows you to do lots of cool things including dynamic messages, add components inside and so much more. Do check out the plugins docs and play around with the library.
Adding Client Side Plugins
if you do use a library that needs access to browser elements such as window or document then you will need to register the plugin only on the client side. This can be done by adding .client.js as the file extension to your plugin. This tells Nuxt to not render this plugin on the Server but only on the Client, in the Browser. See the Nuxt docs for more details.