Detect internet speed in Vue.js with vue-identify-network plugin


Category: Vue.js Vue.js Others | August 25, 2021
Author: vinayakkulkarni
Official Page: Go to website
Last Update: August 25, 2021
License: MIT

vuejs detect internet speed

Description:

You can detect internet speed in Vue.js of your visitors easily by just installing the vue-identify-network component. This component is lightweight and simple to use.

Available for Vue.js version 2 and 3.

How can I install and use it?

1. Install the component with npm.

npm install --save vue-identify-network

2. Import the required components to your file.

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

3. Register the component.

Vue.component('example-component', {
  components: {
    VueIdentifyNetwork
  },
  setup() {
    function handleNetworkIdentified(type: string) {
      console.log('connection type: ', type);
    }
    function handleNetworkSpeed(speed: number) {
      console.log('downlink: ', speed);
    }
  }
});

4. Add the component to your template.

<vue-identify-network
  @network-type="handleNetworkIdentified"
  @network-speed="handleNetworkSpeed"
>
  <template #unknown>
    REEE! Unable to identify your network type.
  </template>
  <template #slow>
    <img src="cat.gif" alt="you got slow internet" />
  </template>
  <template #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>
  </template>
</vue-identify-network>