Add Vue.js event on window

You should just do it manually during the creation and destruction of the component

...created: function() {  window.addEventListener('mousemove',this.move);},destroyed: function() {  window.removeEventListener('mousemove', this.move);}...

Jeff's answer is perfect and should be the accepted answer. Helped me out a lot!

Although, I have something to add that caused me some headache. When defining the move method it's important to use the function() constructor and not use ES6 arrow function => if you want access to this on the child component. this doesn't get passed through to arrow functions from where it's called but rather referrers to its surroundings where it is defined. This is called lexical scope.

Here is my implementation with the called method (here called keyDown instead of move) included:

export default {  name: 'app',  components: {    SudokuBoard  },  methods: {    keyDown: function () {      const activeElement = document.getElementsByClassName('active')[0]      if (activeElement && !isNaN(event.key) && event.key > 0) {        activeElement.innerHTML = event.key      }    }  },  created: function () {    window.addEventListener('keydown', this.keyDown)  },  destroyed: function () {    window.removeEventListener('keydown', this.keyDown)  }}

To be extra clear, The method below doesn't have access to this and can't for example reach the data or props object on your child component.

methods: {     keyDown: () => {      //no 'this' passed. Can't access child's context       }

You can also use the vue-global-events library.

<GlobalEvents @mousemove="move"/>

It also supports event modifiers like @keydown.up.ctrl.prevent="handler".