Package Exports

vue3-all-click-away
vue3-all-click-away/dist/common.js
vue3-all-click-away/dist/module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-all-click-away) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue All Click Away

Vue 3.0 Compatible Click Away Directive

Example GIF

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.

import { createApp } from "vue";
import App from "./App.vue";
import VueAllClickAway from "vue3-all-click-away";

const app = createApp(App);

app.use(VueAllClickAway) // Makes 'v-all-click-away' directive usable in every component
app.mount('#app')

With Options API

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

<script>
export default {
  methods: {
    onClickAway(event) {
      console.log(event)
    }
  }
}
</script>

or with Vue Composition API & Typescript

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

<script>
export default {
  setup() {
    const onClickAway = (event) => {
      console.log(event)
    }

    return { onClickAway }
  } 
}
</script>

Directive

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

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

Mixin

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

import { mixin as VueAllClickAway } from "vue3-all-click-away";
export default {
  mixins: [VueClickAway],
  methods: {
    onClickAway(event) {
      console.log(event);
    }
  }
}