Vue event bus plugin listening for online/offline changes

vue-connection-listener

Whenever the navigator's connection status changes a 'connection' event is emitted with a boolean payload indicating the new state (online = true, offline = false).

Installation

npm install --save vue-connection-listener

Setup & example

main.js

import Vue from 'Vue';
import bus from './bus'; // Event bus instance

Vue.prototype.$bus = bus; // Optional (but convenient)

import VueConnectionListener from 'vue-connection-listener';
const connectionListener = new VueConnectionListener(bus); // Create instance (injecting our bus)

new Vue({
  el: '#app',
  render: h => h(App),
  created() {
    connectionListener.register();
  },
  destroyed() {
    connectionListener.unregister();
  }
});

Inside any component

  this.$bus.$on('connection', online => {
    alert(online ? 'You are online ?' : 'You are offline ?')
  });

Notes

You need to import your own event bus and then inject it as a dependency.

Creating a bus could be as simple as creating a bus.js file with the following contents:

import Vue from 'vue';
export default new Vue();

GitHub