• Identify the Internet Speed ⚡️ your users have.
• Built from scratch usign Vue 2 & Composition API with TypeScript
• For Vue 2.x version – npm i vue-identify-network@2
• For Vue 3.x version – npm i vue-identify-network@3

• vue-identify-network ⚡️
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
  • Usage
    • Globally
      • As a component
      • As a plugin
    • Locally
      • Example
  • API
    • Slots
    • Props
    • Events
  • Built with
  • Contributing
  • Author

• vue^2.x
• @vue/composition-api^1.x

npm install --save vue-identify-network npm install --save-dev @vue/composition-api

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

# install dependencies $ npm ci # package the library $ npm run build

Vue.component('VueIdentifyNetwork',require('vue-identify-network'));

importVuefrom'vue';importVueIdentifyNetworkfrom'vue-identify-network';Vue.use(VueIdentifyNetwork);

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

<vue-identify-network@network-type="handleNetworkIdentified" @network-speed="handleNetworkSpeed" ><template#unknown> REEE! Unable to identify your network type. </template><template#slow><imgsrc="cat.gif" alt="you got slow internet" /></template><template#fast><videowidth="400" controls><sourcesrc="mov_bbb.mp4" type="video/mp4" /><sourcesrc="mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video></template></vue-identify-network>

import{VueIdentifyNetwork}from'vue-identify-network';Vue.component('example-component',{components: { VueIdentifyNetwork },setup(){functionhandleNetworkIdentified(type: string){console.log('connection type: ',type);}functionhandleNetworkSpeed(speed: number){console.log('downlink: ',speed);}}});

• TypeScript.
• Vue 2

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

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