Click Away

A simple directive that triggers a function if the user clicks outside of the bound element.
<template>
  <div v-clickaway="hideMe">Hide me</div>
</template>

<script>
Vue.directive('clickaway', {
  bind (el, { value }) {
    if (typeof value !== 'function') {
      console.warn(`Expect a function, got ${value}`)
      return
    }

    document.addEventListener('click', e => el.contains(e.target) || value())
  }
})

export default {
  methods: {
    hideMe () {
      // your logic here
    }
  }
}
</script>