Best way to using vue-clickaway in Nuxt.

Muhammet ESER — Tue, 03 Nov 2020 18:12:00 +0000

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

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

DEV Community: Muhammet ESER