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

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

network vue

Last synced: 13 days ago
JSON representation

Render a Vue component to indicate network status.

• Host: GitHub
• URL: https://github.com/egoist/vue-network
• Owner: egoist
• License: mit
• Created: 2017-09-19T03:18:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T04:13:08.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T12:23:18.724Z (about 1 month ago)
• Topics: network, vue
• Language: JavaScript
• Homepage: https://egoist.moe/vue-network
• Size: 1.12 MB
• Stars: 44
• Watchers: 3
• Forks: 4
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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)