Package Exports

v-offline

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-offline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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

Note:

Please contribute using Github Flow
Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
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

v-offline