Online / Offline Detection with Vue.js & v-offline

Install v-offline in your Vue.js project.

# Yarn
$ yarn add v-offline

# or NPM
$ npm install v-offline --save

<template>
  <!-- @detected-condition fires when the connectivity status of the device changes -->
  <offline @detected-condition="handleConnectivityChange">
    <!-- Only renders when the device is online -->
    <div slot="online">
      <p>It looks like you're online! Here's all the things you can do...</p>
      ...
    </div>
    <!-- Only renders when the device is offline -->
    <div slot="offline">
      <p>You appear to be offline, that's okay, we can still do things...</p>
      ...
    </div>
  </offline>
</template>

<script>
import offline from 'v-offline';

export default {
  components: {
    offline
  },

  methods: {
    handleConnectivityChange(status) {
      console.log(status);
    }
  }
}
</script>

There’s not much else to add, that’s about all you need. Enjoy!