V-offline is a simple VueJS component introduced by Vinayak Kulkarni to detect offline & online event changes in your web application. This component has been built from scratch by utilizing Vue 2 & Composition API with TypeScript. You can use this package for both Vue 2 and Vue 3.

Requirements

• vue ^2.x
• @vue/composition-api ^1.x

Installation

npm install --save v-offline
npm install --save-dev @vue/composition-api

Usage

Globally

As a Component

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

As a Plugin

import Vue from 'vue';
import VOffline from 'v-offline';

Vue.use(VOffline);

Locally

import { VOffline } from 'v-offline';

Example

Locally imported as a component.

<v-offline @detected-condition="amIOnline">
  <template v-if="online"> ( Online: {{ onLine }} ) </template>
  <template v-if="offline"> ( Online: {{ onLine }} ) </template>
</v-offline>

import { VOffline } from 'v-offline';

Vue.component('example-component', {
  components: {
    VOffline
  },
  data() {
    return {
      onLine: true,
    };
  },
  methods: {
    amIOnline(e) {
      this.onLine = e;
    },
  },
});

.offline {
  background-color: #fc9842;
  background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}
.online {
  background-color: #00b712;
  background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}

Props

Name	Type	Required	Default	Description
online-class	String	No	-	Styling the div which you want to give if you’re online.
offline-class	String	No	-	Styling the div which you want to give if you’re offline.
ping-url	String	No	https://google.com	Pinging any URL to double-check if you’re online or not.

For more detailed documentation & source code. you can visit Github.