Skip to main content

⚡ Identify what kinda internet your users are using!

This package works with Bun, BrowsersIt is unknown whether this package works with Cloudflare Workers, Deno
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
41%
Published
2 weeks ago (3.0.1)

Vue Identify Network ⚡️

CI CodeQL Ship.js Trigger npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo GitHub contributors

eslint prettier vite vue typescript

⚠️ Docs are for Vue 3, for Vue 2 docs, click here

Features

  • Identify the Internet Speed ⚡️ your users have.
  • For Vue >= 3.x – npm i vue-identify-network@latest
  • For Vue 2 – npm i vue-identify-network@2

Table of Contents

Demo

Edit vue-identify-network demo

Requirements

Installation

npm install --save vue-identify-network

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

Build Setup

# install dependencies
$ npm install

# package the library
$ npm run build

Usage

Global component:

// main.ts
import { VueIdentifyNetwork } from 'vue-identify-network';
import { createApp } from 'vue';

const app = createApp({});
app.component('VueIdentifyNetwork', VueIdentifyNetwork);

Or use locally

// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VueIdentifyNetwork } from 'vue-identify-network';

export default defineComponent({
  components: {
    VueIdentifyNetwork,
  },
});
</script>

For Nuxt 3, create a file in plugins/vue-identify-network.ts

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VueIdentifyNetwork', VueIdentifyNetwork);
});

then import the file in nuxt.config.{j|t}s:

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/vue-identify-network', mode: 'client' },
    // ...
  ],
  // ...
};

Example

<template>
  <vue-identify-network>
    <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>
  </vue-identify-network>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import type { Ref } from 'vue';
  import { VueIdentifyNetwork } from 'vue-identify-network';

  export default defineComponent({
    components: {
      VueIdentifyNetwork,
    },
    setup() {
      const online: Ref<boolean> = ref(false);
      const onNetworkChange = (status: boolean) => {
        online.value = status;
      };
      return { online, onNetworkChange };
    },
  });
</script>

API

Slots

Name Description
unknown Named slot for when the type of connection is unidentifyable
slow Named slot for when navigator.connection.effectiveType === '2g'
fast Named slot for when navigator.connection.effectiveType !== '2g'

Props

Name Type Required? Default Description
unknown-class String No null Styling the div which you want to give if network type is undetected.
slow-class String No null Styling the div which you want to give if network type is slow.
fast-class String No null Styling the div which you want to give if network type is fast.

Events

Name Returns Description
@network-type String Emits a string value
@network-speed String Emits a number value

Contributing

  1. Fork it ( https://github.com/vinayakkulkarni/vue-identify-network/fork )
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

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

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

Add Package

deno add @vinayakkulkarni/vue-identify-network

Import symbol

import * as mod from "@vinayakkulkarni/vue-identify-network/";

Add Package

bunx jsr add @vinayakkulkarni/vue-identify-network

Import symbol

import * as mod from "@vinayakkulkarni/vue-identify-network/";