GitHub - vinayakkulkarni/vue-identify-network: ⚡ Identify what kinda internet your users are using! (original) (raw)

Vue Identify Network ⚡️

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

Features

Identify the Internet Speed ⚡️ your users have.
For Vue >= 3.x – npm i vue-identify-network@latest
For Vue 2 – npm i vue-identify-network@2

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

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

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

REEE! Unable to identify your network type. you got slow internet

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