Identify what kinda internet your users are using

by Vue.js Examples

Vue Identify Network

Identify what kinda internet your users are using!

View demo Download Source

Install

yarn add vue-identify-network

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

Usage

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

<script>
import DetectedSpeed from 'vue-identify-network';

export default {
  components: {
    DetectedSpeed,
  },
};
</script>

API

Slots

  • unknown: The slot to show when we are unable to identify network type (navigator.connection.effectiveType === "Unknown")
  • slow: The slot to show when internet is slow (navigator.connection.effectiveType === "2g")
  • fast: The slot to show when internet is fast (navigator.connection.effectiveType !== "2g")

Props

  • unknownClass: Add your own classes to the div
  • slowClass: Add your own classes to the div
  • fastClass: Add your own classes to the div

Events

  • network-type<type>: Emitted after network speed is identified, eg:
<detected-speed @network-type="handleNetworkIdentified"></detected-speed>

function handleNetworkIdentified(type) {
  console.log(type);
}

GitHub