/ Miscellaneous

Identify what kinda internet your users are using

Identify what kinda internet your users are using

Vue Identify Network

Identify what kinda internet your users are using!

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