vue-click-outside-element

This is a simple very small directive to detect clicks ouside element not component on which this directive applied. For clicking outside component check Vue-Click-Outside-Component

Install

• For Vue 3 npm i vue-click-outside-element
• For Vue 2 npm i vue-click-outside-element@1.0.15

NOTE: Vue 3 version of this directive is better typed and way better tested

Usage

Apply like basic directive.

It accepts only functions that are present inside methods object.

<div v-click-outside-element="someRandomFunction">Hello World</div>

Example

1// main.js
2import vueClickOutsideElement from 'vue-click-outside-element'
3
4const app = createApp(App)
5
6/* NOTE: By default directive mounts with `click-outside-element`
7 * `app.use(vueClickOutsideElement)`
8 * But you can name it whatever you want
9 * app.use(vueClickOutsideElement, 'my-name')
10 * And use it like `<div v-my-name="method"></div>`
11 */
12
13app.use(vueClickOutsideElement)
14app.mount('#app')

1<!-- App.vue -->
2<template>
3    <button v-click-outside-element="close" v-if="showButton">showing</button>
4</template>
5
6<script>
7export default {
8    data() {
9        return { showButton: true }
10    },
11    methods: {
12        close(el){
13            this.showButton = false
14        }
15    }
16}
17</script>

Contrib

• Submit issue, any bugs, issues features are accepted.
• Clone, pull, play with example, test, submit merge request

Roadmap

• Combining click outside element and click outside component in one package
• Introduce more tests