vue-identify-network
v3.0.1
Published
Identify the network your users are using!
Downloads
4,712
Maintainers
Readme
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
Demo
Requirements
- vue
^3.x
Installation
npm install --save vue-identify-network
CDN: UNPKG | jsDelivr (available as window.VueIdentifyNetwork
)
Build Setup
# install dependencies
$ npm install
# package the library
$ npm run build
Usage
Global component:
// main.ts
import { VueIdentifyNetwork } from 'vue-identify-network';
import { createApp } from 'vue';
const app = createApp({});
app.component('VueIdentifyNetwork', VueIdentifyNetwork);
Or use locally
// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VueIdentifyNetwork } from 'vue-identify-network';
export default defineComponent({
components: {
VueIdentifyNetwork,
},
});
</script>
For Nuxt 3, create a file in plugins/vue-identify-network.ts
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
:
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/vue-identify-network', mode: 'client' },
// ...
],
// ...
};
Example
<template>
<vue-identify-network>
<span slot="unknown"> REEE! Unable to identify your network type. </span>
<span slot="slow">
<img src="cat.gif" alt="you got slow internet" />
</span>
<span slot="fast">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</span>
</vue-identify-network>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { Ref } from 'vue';
import { VueIdentifyNetwork } from 'vue-identify-network';
export default defineComponent({
components: {
VueIdentifyNetwork,
},
setup() {
const online: Ref<boolean> = ref(false);
const onNetworkChange = (status: boolean) => {
online.value = status;
};
return { online, onNetworkChange };
},
});
</script>
API
Slots
| 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'
|
Props
| 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. |
Events
| Name | Returns | Description |
| ---------------- | ------- | -------------------- |
| @network-type
| String | Emits a string value |
| @network-speed
| String | Emits a number value |
Contributing
- Fork it ( https://github.com/vinayakkulkarni/vue-identify-network/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
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