Click Away is a directive to detect if the user is clicking outside of the item. Compatible with Vue 3.x using VitePress and is included in this repository.

vue click outside, v-click-outside example, click tracking tools, v-click-outside not working, vue-click-outside directive, click-outside vuetify, advanced click directive component library

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-click-away

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

1. Import and register the directive.

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

2. Verify click outside event in an item you select.

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

Click Outside Tracker, Vue Click Away Plugin/Github

See Demo And Download

Official Website(VinceG): Click Here

This superior jQuery/javascript plugin is developed by VinceG. For extra Advanced Usages, please go to the official website.