DEV Community

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

Best way to using vue-clickaway in Nuxt.

eserdinyo profile image Muhammet ESER ・1 min read

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
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 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 ✌️

Discussion

pic
Editor guide