vue-connection-listener
Vue event bus plugin listening for online/offline changes
About
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-listenerUsage
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();For more info: