Frontend

Best way using vue-clickaway in Nuxt

In this article, I will show you to the best way of using vue-clickaway package in nuxt project.

Muhammet ESER

Full Stack Developer

In this article, I will show you to the best way of using vue-clickaway package in nuxt project.
First of all, if you are need to use this package in only one place you can just use it regular way like in the documentation.
But if you have a big project and you will use so many places you should see this usage.

Firstly you should install vue-clickaway.
 
yarn add vue-clickaway
 

After that, we will create a nuxt plugin. Let’s give it a name like clickaway.js. It’s totally up to you.
We will use vue’s Global Mixin feature for using the vue-clickway to global. You can take a look to docs.
Lets add the following code to our clickaway.js file.
 

import { mixin as clickaway } from 'vue-clickaway'
import Vue from 'vue'

Vue.mixin({
  mixins: [clickaway],
})

 
Finally, we should register this plugin to our nuxt.config.js file.

 plugins: [
    '~/plugins/clickaway',
  ],

 
And our clickaway plugin is ready to use. You can it anywhere you want in your project like in the example.

<div v-on-clickaway="closeMenu">
    <h1>Some text...</h1>          
</div>

 
See you on the next tip. Have a nice coding ✌️

Are we the partners you’ve been searching for?

Tell us about your project.