Directiva de Vue.JS para detectar clicks afuera de un elemento, útil para cerrar diálogos y menús.

Una de las tareas más comunes que enfrentamos en desarrollo web es la de cerrar elementos de una página web cuando hacemos click fuera de ellos. En este artículo te mostraremos como añadir esta funcionalidad a tu proyecto web en Vue.JS. Para lograrlo nos apoyaremos en v-click-outside, una directiva de Vue desarrollada por Nicolas del Valle .

Esta directiva reacciona a los cliks realizados en el exterior de un elemento, por tanto servirá a nuestros propósitos. Al incorporarla a un elemento seremos capaces de detectar si el click se produjo en el exterior de este y, si es el caso, activar un método que se encargue de ocultarlo.

Cómo añadir v-click-outside en tu proyecto con Vue-CLI:

Con Yarn:

yarn add v-click-outside

Con NPM:

npm install --save v-click-outside

Adiciona en tu archivo main.js de la carpeta src:

  import Vue from 'vue';  
  import vClickOutside from 'v-click-outside';  
     
  Vue.use(vClickOutside);        
            

Adicionar v-click-outside en un proyecto Nuxt.JS:

Hasta ahora no hemos encontrado un componente de NUXT para v-click-outside pero en cualquier caso podemos añadirlo a nuestro proyecto como un plugin. A continuación te mostramos el procedimiento:

Con Yarn:

yarn add v-click-outside

Con NPM:

npm install --save v-click-outside

Luego crea el fichero vClickOutside.js en la carpeta plugins de tu proyecto NUXT y configura el plugin:

import Vue from "vue"
import vClickOutside from "v-click-outside"

Vue.use(vClickOutside)
            

Para finalizar necesitamos registrar el nuevo plugin vClickOutside.js en nuestro archivo nuxt.config.js :

/*
** Plugins a cargar antes de montar aplicación
*/
plugins: [
{ src: "@/plugins/vClickOutside", ssr: false }
],
            

Uso de la directiva v-click-outside en Vue:

Ya puedes comenzar a usar la directiva v-click-outside en el elemento que desees:

<template>
  <div v-click-outside="clickExterno">
       Hola, soy el div que deseas ocultar!
  </div>
</template>
       
<script>
  import vClickOutside from 'v-click-outside'
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      clickExterno (event) {
        console.log('Click externo. Evento: ', event)
      }
    }
  };

     </script>

Una vez que añadimos la directiva v-click-outside a un elemento estamos listos para detectar cualquier click fuera de este. Solamente necesitamos personalizar nuestro método asociado para obtener el resultado deseado.

Recuerda que vas a necesitar importar vClickOutside en cada componente donde planees usarlo, además de declararlo como directiva en tu <script>.

Todo listo. Tus usuarios te lo agracerán la próxima vez que visiten tu sitio y descubran que ahora pueden ocultar fácilmente ese menú móvil o el modal que les ofrece la mejor oferta de sus vidas. Incluso, puede ser que decidan regresar.