Detect click outside element in nuxt

Question

I have a nuxt project. I need to write a click-outside directive by which I can detect outside clicks of elements to close them. How can I implement it?

Answer 1

The answer is to create a directives.js file in your plugins and register it in the config.nuxt.js file. The content of the directives.js file is as follows:

import Vue from 'vue';

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
        }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
    },
});

Then you can use it on any element that you want and execute your function.

For Example:

<div v-click-outside="closeDropdown"></div>

Answer 2

This is a common JS issue, you can try to solve it with this: https://stackoverflow.com/a/36696086/4239703

You can register the handler on mounted() lifecycle hook for example.

Answer 3

import Vue from 'vue'
 
Vue.directive('click-outside', {
 bind: function (el, binding, vnode) {
   el.clickOutsideEvent = function (event) {
     // here I check that click was outside the el and his children
     if (!(el == event.target || el.contains(event.target))) {
       // and if it did, change data from directive
       vnode.context.isDropdwonMenuVisible = false;
     }
   };
   document.body.addEventListener('click', el.clickOutsideEvent)
 },
 unbind: function (el) {
   document.body.removeEventListener('click', el.clickOutsideEvent)
 },
});


<a v-click-outside>Link</a>


data() {
    return {
      isDropdwonMenuVisible: true,
    };
  },

nuxt.config.js

plugins: [
  '~/plugins/click-outside.js'
]

Answer 4

Just use this to change the state.

v-on:focusout=""