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 [email protected]

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

// main.js
import vueClickOutsideElement from 'vue-click-outside-element'

const app = createApp(App)

/* NOTE: By default directive mounts with `click-outside-element`
 * `app.use(vueClickOutsideElement)`
 * But you can name it whatever you want
 * app.use(vueClickOutsideElement, 'my-name')
 * And use it like `<div v-my-name="method"></div>`
 */

app.use(vueClickOutsideElement)
app.mount('#app')

<!-- App.vue -->
<template>
    <button v-click-outside-element="close" v-if="showButton">showing</button>
</template>

<script>
export default {
    data() {
        return { showButton: true }
    },
    methods: {
        close(el){
            this.showButton = false
        }
    }
}
</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