vue-internet-checker

vue-internet-checker

Vue 3 component/plugin to detect browser internet connectivity changes using native online and offline events.

• Emits a boolean connectivity status.
• Emits the original browser event object.
• Lightweight component with no UI rendering.

Requirements

• Vue 3.x
• Browser environment (window and navigator)

Install

npm install vue-internet-checker
# or
yarn add vue-internet-checker
# or
pnpm add vue-internet-checker

CDN builds:

• UNPKG: https://unpkg.com/vue-internet-checker/dist/
• jsDelivr: https://cdn.jsdelivr.net/npm/vue-internet-checker/dist/

Usage

1) Global registration with plugin (app.use)

import { createApp } from 'vue';
import App from './App.vue';
import VueInternetChecker from 'vue-internet-checker';

const app = createApp(App);
app.use(VueInternetChecker);
app.mount('#app');

Then use in templates:

<vue-internet-checker @status="status" @event="event" />

2) Local registration in a component

<script>
import VueInternetChecker from 'vue-internet-checker';

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

<template>
  <VueInternetChecker @status="status" @event="event" />
</template>

3) Named imports

import { vueInternetChecker } from 'vue-internet-checker';

TypeScript Support

This package includes built-in type declarations.

import VueInternetChecker, {
  vueInternetChecker,
  install,
  type InternetStatus,
  type InternetEvent,
} from 'vue-internet-checker';

Type details:

• status event payload: InternetStatus (boolean)
• event event payload: InternetEvent (Event)

TypeScript Example (<script setup lang="ts">)

<template>
  <VueInternetChecker @status="onStatus" @event="onEvent" />
  <p>Status: {{ isOnline ? 'Online' : 'Offline' }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VueInternetChecker, {
  type InternetStatus,
  type InternetEvent,
} from 'vue-internet-checker';

const isOnline = ref<boolean>(true);

const onStatus = (value: InternetStatus): void => {
  isOnline.value = value;
};

const onEvent = (event: InternetEvent): void => {
  console.log(event.type);
};
</script>

Events

Behavior Details

• On mount, the component emits the initial status once (navigator.onLine).
• On browser connectivity change, it emits:
  • status
  • event
• On unmount, event listeners are removed.

Full Example

<template>
  <main>
    <VueInternetChecker @status="onStatus" @event="onEvent" />

    <h1>Internet Checker</h1>
    <p>Status: <strong>{{ isOnline ? 'Online' : 'Offline' }}</strong></p>
    <p>Last event: {{ lastEventType }}</p>
  </main>
</template>

<script>
import VueInternetChecker from 'vue-internet-checker';

export default {
  name: 'ConnectivityExample',
  components: {
    VueInternetChecker,
  },
  data() {
    return {
      isOnline: true,
      lastEventType: 'initial',
    };
  },
  methods: {
    onStatus(value) {
      this.isOnline = value;
    },
    onEvent(event) {
      this.lastEventType = event.type;
    },
  },
};
</script>

Vue 2 to Vue 3 Migration

Version 3.0.0 targets Vue 3.

• Upgrade your app to Vue 3.
• Register with createApp(...).use(...) for global use.
• If you were using local component import, it still works.

Changelog

3.0.0

• Added Vue 3 support.
• Added plugin install API for app.use(...).
• Added initial status emit on mount.
• Added listener cleanup on unmount.
• Updated build and package dependencies for Vue 3.

Contributing

1. Fork the repo.
2. Create your branch: git checkout -b my-feature.
3. Commit your changes.
4. Push the branch.
5. Open a pull request.

License

MIT

Author

• GitHub: https://github.com/harshmendapara
• Email: mendaparaharsh02@gmail.com
• LinkedIn: https://www.linkedin.com/in/harsh-mendapara-44883a165/