Handle Global Events in Vue.js

Joshua Bemenderfer

Vueโ€™s method of event handling is great. Just throw a little @eventName="eventHandler" attribute on an element and call it a day. However, such conveniences donโ€™t extend to global events by default. Youโ€™ll have to go with the tried-and-true method with addEventListener. Or, you could use this itty-bitty handy little Vue component brought to you by Damian Dulisz and Eduardo San Martin Morote.


# Yarn
$ yarn vue-global-events
$ npm install vue-global-events --save


Now install the component in main.js.


import Vue from 'vue';
import App from './App.vue';
import GlobalEvents from 'vue-global-events';

// You can also import it individually per-component.

new Vue({
  el: '#app',
  render: h => h(App)

Now you can listen to all sorts of global events from any component, while still using Vueโ€™s clear and simple syntax. You donโ€™t even need to worry about deregistering events! You can also use v-if and related directives to enable and disable the handlers.

    <!-- The rest of your component -->

export default {
  methods: {
    handleAppFocus() {
      console.log(`I've been focused!`);

    handleAppBlur() {
      console.log(`I'm feeling a bit blurry...`);

    handleTabChange() {
      console.log(`**Doing Tab Changy Things**`);
  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#