Package Exports

vue-identify-network

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-identify-network) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Identify Network

Identify the Internet Speed ⚡️ your users have.
Demo Link -> Click Here
This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻

Install

yarn add vue-identify-network

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

Usage

<template>
  <detected-speed>
    <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

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

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

Events

changed<type>: Emitted after network speed is identified, eg:

<detected-speed @changed="handleNetworkIdentified"></detected-speed>

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

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

vue-identify-network © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayak.site · GitHub @vinayakkulkarni · Twitter @_vinayak_k