A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/Botre/vue-connection-listener below:

byteboomers/vue-connection-listener: Vue event bus plugin listening for online/offline changes

Vue event bus plugin listening for online/offline changes

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

npm install --save vue-connection-listener

npm package link

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 😞");
});

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:

https://alligator.io/vuejs/global-event-bus/


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4