Vue All Click Away

Vue 3.0 Compatible Click Away Directive

Overview

Detect if a click event happened outside of an element, even right clicks. Compatible with Vue 3.x.

Requirements

• Vue 3.x

Installation

npm i -s vue3-all-click-away

yarn add vue3-all-click-away

Usage

By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive.

1import { createApp } from "vue";
2import App from "./App.vue";
3import VueAllClickAway from "vue3-all-click-away";
4
5const app = createApp(App);
6
7app.use(VueAllClickAway) // Makes 'v-all-click-away' directive usable in every component
8app.mount('#app')

With Options API

1<template>
2  <div v-all-click-away="onClickAway">
3    ...
4  </div>
5</template>
6
7<script>
8export default {
9  methods: {
10    onClickAway(event) {
11      console.log(event)
12    }
13  }
14}
15</script>

or with Vue Composition API & Typescript

1<template>
2  <div v-all-click-away="onClickAway">
3    ...
4  </div>
5</template>
6
7<script>
8export default {
9  setup() {
10    const onClickAway = (event) => {
11      console.log(event)
12    }
13
14    return { onClickAway }
15  } 
16}
17</script>

Directive

1<template>
2  <div v-all-click-away="onClickAway">
3    ...
4  </div>
5</template>

1import { directive } from "vue3-all-click-away";
2export default {
3  directives: {
4    ClickAway: directive
5  },
6  methods: {
7    onClickAway(event) {
8      console.log(event);
9    }
10  }
11}

Mixin

1<template>
2  <div v-all-click-away="onClickAway">
3    ...
4  </div>
5</template>

1import { mixin as VueAllClickAway } from "vue3-all-click-away";
2export default {
3  mixins: [VueClickAway],
4  methods: {
5    onClickAway(event) {
6      console.log(event);
7    }
8  }
9}