vue-click-outside-component

This is a simple very small directive to detect clicks ouside component not element on which this directive applied.

For clickin outside element inside the component check Vue-Click-Outside-Element

or search npm for vue-click-outside-element

Install

npm i vue-click-outside-component

or

yarn add vue-click-outside-component

Usage

Apply like basic directive.

It accepts only functions that are present inside methods object.

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

Examples

This will work since its attached to root element

<template>
    <div v-click-outside-component="close">
        <p v-if="show">if you click button this text will dissappear</p>
        <p>but the button does not have any events on it</p>
    </div>
</template>

<script>
import Vue from 'vue'
import VueClickOutsideComponent from 'VueClickOutsideComponent'

Vue.use(VueClickOutsideComponent)

export default {
    data() { return { showButton: true } },
    methods: {
        close(el){
            this.showButton = false
        }
    }
}
</script>

This will not work since its not attached to existing dom node.

<template v-click-outside-component="close">
    <div>
        <p v-if="show">if you click button this text will dissappear</p>
        <p>but the button does not have any events on it</p>
    </div>
</template>

This will work but will trigger 'close' fn in the same scope and will not get passed inside the component. For that, use vue-click-outside-element.

<template>
    <div>
        <myComponent v-click-outside-component="close" />
        <p v-if="show">if you click button this text will dissappear</p>
        <p>but the button does not have any events on it</p>
    </div>
</template>

<script>
import Vue from 'vue'
import VueClickOutsideComponent from 'VueClickOutsideComponent'
import myComponent from './myComponent.vue'

Vue.use(VueClickOutsideComponent)

export default {
    components: { myComponent }
    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
• Any feedback would be greatly appreciated.

Roadmap

• More tests with usability and browser compatibility
• Strong typing with typescript
• Supporting and tesing with Vue 3
• Add CodeSandbox playground