Vue Identify Network ⚡️



⚠️ Docs are for Vue 3, for Vue 2 docs, click here

Features

- Detect offline & online events for your vue app.
- Built from scratch usign Vue 2 & Composition API with TypeScript
- For Vue >= 3.x – npm i vue-identify-network@latest
- For Vue 2 – npm i vue-identify-network@2

Table of Contents

- Vue Identify Network ⚡️
- Features
- Table of Contents
- Demo
- Requirements
- Installation
- Build Setup
- Usage
- Example
- API
- Slots
- Props
- Events
- Contributing
- Author

Demo


Requirements

- vue ^3.x

$3

``sh
npm install --save vue-identify-network
`

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

$3

`bash


install dependencies

$ npm install

package the library

$ npm run build
`

$3

Global component:

`js
// main.ts
import { VueIdentifyNetwork } from 'vue-identify-network';
import { createApp } from 'vue';

const app = createApp({});
app.component('VueIdentifyNetwork', VueIdentifyNetwork);
`

Or use locally

`js
// component.vue

`

For Nuxt 3, create a file in plugins/vue-identify-network.ts

`js
import { VueIdentifyNetwork } from 'vue-identify-network';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VueIdentifyNetwork', VueIdentifyNetwork);
});
`

then import the file in nuxt.config.{j|t}s:

`js
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/vue-identify-network', mode: 'client' },
// ...
],
// ...
};
`

$3

`html



`

API

$3

| Name | Description |
| --------- | ----------------------------------------------------------------- |
| unknown | Named slot for when the type of connection is unidentifyable |
| slow | Named slot for when navigator.connection.effectiveType === '2g' |
| fast | Named slot for when navigator.connection.effectiveType !== '2g' |

$3

| Name | Type | Required? | Default | Description |
| --------------- | ------ | --------- | ------- | ----------------------------------------------------------------------- |
| unknown-class | String | No | null | Styling the div which you want to give if network type is undetected. |
| slow-class | String | No | null | Styling the div which you want to give if network type is slow. |
| fast-class | String | No | null | Styling the div which you want to give if network type is fast. |

$3

| Name | Returns | Description |
| ---------------- | ------- | -------------------- |
| @network-type | String | Emits a string value |
| @network-speed | String | Emits a number value |

Contributing

1. Fork it ( https://github.com/vinayakkulkarni/vue-identify-network/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

vue-identify-network © Vinayak, Released under the MIT License.

Authored and maintained by Vinayak Kulkarni with help from contributors (list).

> vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @\_vinayak_k