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

• 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

• vue^3.x

npm install --save vue-identify-network

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

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

Global component:

// main.tsimport{VueIdentifyNetwork}from'vue-identify-network';import{createApp}from'vue';constapp=createApp({});app.component('VueIdentifyNetwork',VueIdentifyNetwork);

Or use locally

// component.vue<scriptlang="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';exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.component('VueIdentifyNetwork',VueIdentifyNetwork);});

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

exportdefault{// ...plugins: [// ...{src: '~/plugins/vue-identify-network',mode: 'client'},// ...],// ...};

<template><vue-identify-network><spanslot="unknown"> REEE! Unable to identify your network type. </span><spanslot="slow"><imgsrc="cat.gif" alt="you got slow internet" /></span><spanslot="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></span></vue-identify-network></template><scriptlang="ts">import{defineComponent,ref}from'vue';importtype{Ref}from'vue';import{VueIdentifyNetwork}from'vue-identify-network';exportdefaultdefineComponent({components: { VueIdentifyNetwork,},setup(){constonline: Ref<boolean> = ref(false); const onNetworkChange = (status: boolean) =>{online.value=status;}; return {online,onNetworkChange}; },});</script>

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