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


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: {
  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.

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