DEV Community

Cover image for Best way to using vue-clickaway in Nuxt.
Muhammet ESER
Muhammet ESER

Posted on • Updated on

Best way to using vue-clickaway in Nuxt.

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 as 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
Enter fullscreen mode Exit fullscreen mode

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],
})
Enter fullscreen mode Exit fullscreen mode

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

 plugins: [
    '~/plugins/clickaway',
  ],
Enter fullscreen mode Exit fullscreen mode

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

<div v-on-clickaway="closeMenu">
    <h1>Some text...</h1>          
</div>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
joffreyh profile image
Joffrey Hernandez

Thank you !

Collapse
 
jleondev profile image
Joseph León

Thanks!