README

`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

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

Usage no npm install needed!