vue-identify-network
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

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

  • Detect offline & online events for your vue app.
  • Built from scratch usign Vue 2 & Composition API with TypeScript
  • 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

Package Sidebar

Install

npm i vue-identify-network

Weekly Downloads

487

Version

3.0.1

License

MIT

Unpacked Size

40.7 kB

Total Files

12

Last publish

Collaborators

  • vinayakkulkarni