https://github.com/deveodk/vue-online

An easy way to show if a users browser is online, with support for custom notification drivers. Inspired by Sopamo/vue-online.
https://github.com/deveodk/vue-online

npm offline online vue vue2 webpack

Last synced: about 2 months ago
JSON representation

An easy way to show if a users browser is online, with support for custom notification drivers. Inspired by Sopamo/vue-online.

• Host: GitHub
• URL: https://github.com/deveodk/vue-online
• Owner: Deveodk
• License: mit
• Created: 2017-06-01T09:33:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-05T20:35:23.000Z (over 7 years ago)
• Last Synced: 2024-11-09T16:04:21.807Z (about 2 months ago)
• Topics: npm, offline, online, vue, vue2, webpack
• Language: JavaScript
• Homepage: https://packages.deveo.io/packages/vue/vue-online
• Size: 66.4 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @deveodk/vueOnline



[![npm](https://img.shields.io/npm/v/@deveodk/vue-online.svg)](https://www.npmjs.com/package/@deveodk/vue-online) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

> An easy way to show if a users browser is online, with support for custom notification drivers. Inspired by Sopamo/vue-online.

# Demo

See a functioning demo

deveo demo site

## Installation

```bash

npm install --save @deveodk/vue-online

```

### Bundler (Webpack, Rollup)

```js

import Vue from 'vue'

import vueOnline from '@deveodk/vue-online'

Vue.use(vueOnline)

```

### Browser

```html

```

## Usage

The package provides multiple options to notfiy if a users browser is online. The easiest way is to let the plugin do it automaticly. 

#### Using @deveodk/vue-toastr driver

```code

# Using the default notification

import online from '@deveodk/vue-online'

Vue.use(online, {

    notifier: require('@deveodk/vue-online/drivers/deveoToastr.js'),

    defaultOnlineTitle: 'Online',

    defaultOnlineMessage: 'You are online',

    defaultOfflineTitle: 'Offline',

    defaultOffilneMessage: 'You are offline'

})

```

#### Extending the functionality on your own

```code

# The plugin comes with a build in mixin that allows you to make your own functionality

  import {VueOnline} from '@deveodk/vue-online'

  export default {

      mixins: [VueOnline]

  }

```

This will give you a reactive variable ```{{VueOnline}}``` the variable is either ```true``` for online, or ```false``` for offline

## License

[MIT](http://opensource.org/licenses/MIT)