Vue 2.x directive to react on events outside of an element

npm install --save vue-outside-events

import Vue from 'vue'
import vOutsideEvents from 'vue-outside-events'

Vue.use(vOutsideEvents)

<script>
  export default {
    methods: {
      onClickOutside (e, el) {
        console.log('onClickOutside');
        console.log('click heard outside element: ', el);
        console.log('element clicked: '. e.target);
        console.log('event: ', e);
      },
      onMouseOutside (e, el) {
        console.log('onMouseOutside');
        console.log('mouse moved outside element: ', el);
        console.log('element mouse moved over: '. e.target);
        console.log('event: ', e);
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-mousemove-outside="onMouseOutside"></div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js" type="text/javascript"></script>
<script src="js/v-outside-events.min.js" type="text/javascript"></script>

<div id="app">
  <div v-click-outside="onClickOutside"></div>
  <div v-mousemove-outside="onMouseOutside"></div>
</div>

<script>
	new Vue({
		el: '#app',
		methods: {
			onClickOutside (e, el) {
				console.log('onClickOutside');
				console.log('click heard outside element: ', el);
				console.log('element clicked: '. e.target);
				console.log('event: ', e);
			},
			onMouseOutside (e, el) {
				console.log('onMouseOutside');
				console.log('mouse moved outside element: ', el);
				console.log('element mouse moved over: '. e.target);
				console.log('event: ', e);
			}
		}
	});
</script>

<div id="myDiv1" v-event-outside="{ name: 'onFoo', handler: onFooOutside }"></div>
<div id="myDiv2" v-event-outside.jquery="{ name: 'onFoo', handler: onFooOutside }"></div>

<script>
	$(document).trigger("onFoo"); // onFooOutside will be called for #myDiv2, but not #myDiv1

	var event = document.createEvent('Event');
	event.initEvent('onFoo', true, true);
	document.dispatchEvent(event); // onFooOutside will be called for #myDiv1 and #myDiv2
</script>