vue-unclick

Vue-unclick

Vue.js directive to handle clicking outside of an element
Great for use cases such as dropdowns and popovers
Simple integration with Vue template
Advanced configuration to increase performance

Installation

Install via npm:

npm install vue-unclick

Register the directive globally with your Vue.js app:

import { createApp } from "vue"
import unclick from "vue-unclick"

const app = createApp({})
app.directive("unclick", unclick)
app.mount("#app")

Usage

You can apply the directive to any element and the callback method will be fired whenever there is a click on the screen outside of an element (this is what we mean by "un-clicking"):

<template>
  <div v-unclick="hideDropdown">
    <a href="#" @click="toggleDropdown">
      Toggle dropdown
    </a>
    <div v-show="isVisible">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      <p>Dolore ea quibusdam doloremque pariatur rerum cumque quam.</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isVisible: false
      }
    },
    methods: {
      hideDropdown(event) {
        console.log(event)
        this.isVisible = false
      },
      toggleDropdown() {
        this.isVisible = !this.isVisible
      }
    }
  }
</script>

In order to optimize the performance, you can conditionally control when the directive listens for clicks by adding an boolean argument to the directive:

<template>
  <div v-unclick:[isVisible]="hideDropdown">
    ...
  </div>
</template>

In the above example, event listeners will only be added when isVisible is truthy in order to avoid unnecessary overheads. This approach is strongly recommended.

Testing

docker run -it --rm -v "$PWD":/usr/src/app -w /usr/src/app node:latest npm run test -- --coverage