Connection listener is a vue event bus plugin that listens for changes online/offline.

When the navigator’s connection state changes, a “connection” event is issued with a logical payload indicating the new state (connected = true, not connected = false).

How to make use of it:

Installation

npm install --save vue-connection-listener

Usage

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();
  }
});

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

connection listener for vue js, vue-connection-listener Plugin/Github

See Demo And Download

Official Website(byteboomers): Click Here

This superior jQuery/javascript plugin is developed by byteboomers. For extra advanced usage, please go to the official website.