Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/egoist/vue-network

Render a Vue component to indicate network status.
https://github.com/egoist/vue-network

network vue

Last synced: about 2 months ago
JSON representation

Render a Vue component to indicate network status.

Awesome Lists containing this project

README

        

# vue-network

[![NPM version](https://img.shields.io/npm/v/vue-network.svg?style=flat)](https://npmjs.com/package/vue-network) [![NPM downloads](https://img.shields.io/npm/dm/vue-network.svg?style=flat)](https://npmjs.com/package/vue-network) [![CircleCI](https://circleci.com/gh/egoist/vue-network/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-network/tree/master) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate) [![chat](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?style=flat)](https://chat.egoist.moe)

## Install

```bash
yarn add vue-network
```

CDN: [UNPKG](https://unpkg.com/vue-network/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-network/dist/) (available as `window.VueNetwork`)

## Usage

```vue


network is fine
oops, lost network connection

import Network from 'vue-network'

export default {
components: {
Network
}
}

```

## API

### Slots

- `online`: The slot to show when app is online.
- `offline`: The slot to show when app is offline.

### Props

- `changedOnly`: Only show slots after network status is changed, i.e. render nothing on the first render.

### Events

- `changed`: Emitted after network status is changed, eg:

```vue

```

```js
function handleNetworkChanged(online) {
console.log(online)
}
```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Author

**vue-network** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.

Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-network/contributors)).

> [egoist.moe](https://egoist.moe) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)