mohsinalimat / v-offline

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

V-Offline ⚡️

Features

• Detect offline & online events for your vue app.
• Built from scratch usign Vue 2 & Composition API with TypeScript
• For Vue 2.x version – npm i v-offline@2
• For Vue 3.x version – npm i v-offline@3

Table of Contents

• V-Offline ⚡️
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
  • Usage
    • Globally
      • As a component
      • As a plugin
    • Locally
      • Example
  • API
    • Props
    • Events
  • Built with
  • Contributing
  • Author
  • License

Demo

Requirements

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

Installation

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

CDN: UNPKG | jsDelivr (available as window.VOffline)

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

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%);
}

API

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.

Events

Name	Returns	Description
@detected-condition	String	Emits a boolean value

Built with

• TypeScript.
• Vue 2

Contributing

1. Fork it ( https://github.com/vinayakkulkarni/v-offline/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using Github Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. PS. Ensure your commits are signed. Read why

Author

v-offline © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

License