joaquin6 / v-offline

:electric_plug: Simple VueJS component to detect offline & online changes.

V-Offline ⚡

• Detect offline & online events for your vue app.

• This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻

• Demo here -> 💯 Webpackbin Link

Requirements

• Vue.js 2.x

✅ Install 👌

npm install v-offline
# or
yarn add v-offline

CDN: UNPKG | jsDelivr

✅ Usage 🎓

Register the component globally:

Vue.component('detectNetwork', require('v-offline'));

Or use locally

import detectNetwork from 'v-offline';

✅ Example 1 🍀

<detect-network v-on:detected-condition="detected">
  <div slot="online">Your Online Content!</div>
  <div slot="offline">Your Offline Content!</div>
</detect-network>

Vue.component('example-component', {
  data() {
    return {
      state: null,
    };
  },
  methods: {
    detected(e) {
      this.state = e;
    },
  },
});

✅ Example 2 🍀

<detect-network>
  <div slot="online">Your Online Content!</div>
  <div slot="offline">Your Offline Content!</div>
</detect-network>

✅ 📖 Props

Name	Type	Required?	Description
onlineClass	String	No	Styling the div which you want to give if you're online.
offlineClass	String	No	Styling the div which you want to give if you're offline.

✅ 👂 Events

Name	Description
detected-condition	Emits an Boolean value which can be used for multiple purposes in your app.

NPM