Click Outside Tracker In Vue.js 3 – Click Away

Click Away is a Vue.js 3 directive to detect if a user clicks outside of an element.

How to use it:

1. Import and register the directive.

import VueClickAway from "vue3-click-away";
export default {
  directives: {
    ClickAway: VueClickAway,
  },
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}

2. Check the click outside event in an element you specify.

<template>
  <div v-click-away="onClickAway">
    ...
  </div>
</template>

Preview:

Changelog:

v1.2.4 (03/15/2022)

• fix issue with SSR

v1.2.1 (04/06/2021)

• fix: directive and mixin for TS

v1.2.0 (03/23/2021)

• fix: directive and mixin for TS

v1.1.0 (11/29/2020)

• Update

Download Details:

Author: VinceG

Live Demo: https://github.com/VinceG/vue-click-away#demo

Download Link: https://github.com/VinceG/vue-click-away/archive/master.zip

Official Website: https://github.com/VinceG/vue-click-away

Install & Download:

# Yarn
$ yarn add vue3-click-away

# NPM
$ npm i vue3-click-away --save