vue-connection-listener

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #go #golang #machine-learning #rust #deep-learning #docker #java #vue #openai #open-source

vue-connection-listener

(★ 89)

Vue event bus plugin listening for online/offline changes

File Explorer

Download Latest Version (.zip)

- example.png
- vue-connection-listener.js
.babelrc
.gitignore
.npmignore
CHANGELOG.md
LICENSE
package-lock.json
package.json
README.md
webpack.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-connection-listener

Vue event bus plugin listening for online/offline changes

![screenshot](https://raw.githubusercontent.com/byteboomers/vue-connection-listener/master/assets/example.png)

## 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

```bash
npm install --save vue-connection-listener
```

[npm package link](https://www.npmjs.com/package/vue-connection-listener)

## Usage

main.js

```javascript
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

```javascript
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:

```javascript
import Vue from "vue";
export default new Vue();
```

For more info:

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

vue-connection-listener

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

vue-connection-listener

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README