/v-offline

:electric_plug: Simple VueJS component to detect offline & online changes.

Primary LanguageVueMIT LicenseMIT

V-Offline ⚡️

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

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 version – npm i v-offline@latest
  • For Vue >=2.7 version – npm i v-offline@legacy
  • For Vue <2.7 version – npm i v-offline@2.3.0

Table of Contents

Demo

Edit v-offline demo

Requirements

Installation

npm install --save v-offline ping.js

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

Build Setup

# install dependencies
$ npm install

# package the library
$ npm run build

Usage

Global component:

// main.ts
import { VOffline } from 'v-offline';
import { createApp } from 'vue';

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

Or use locally

// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VOffline } from 'v-offline';

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

For Nuxt 3, create a file in plugins/v-offline.ts

import { VOffline } from 'v-offline';

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

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

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/v-offline', mode: 'client' },
    // ...
  ],
  // ...
};

Example

<template>
  <v-offline
    online-class="online"
    offline-class="offline"
    @detected-condition="onNetworkChange"
  >
    <template v-if="online">
      <div class="flex w-full h-full justify-center items-center text-6xl">
        ⚡️
      </div>
    </template>
    <template v-if="!online">
      <div class="flex w-full h-full justify-center items-center text-6xl">
        💩
      </div>
    </template>
  </v-offline>
  <!-- Netlify Badge -->
  <div class="absolute bottom-4 right-4">
    <a
      href="https://app.netlify.com/sites/v-offline/deploys"
      aria-label="View deploys on Netlify"
      target="_blank"
      rel="noopener noreferrer"
      class="gray-400"
    >
      <img
        src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
        alt="Deploys by Netlify"
      />
    </a>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import type { Ref } from 'vue';
  import { VOffline } from 'v-offline';

  export default defineComponent({
    components: {
      VOffline,
    },
    setup() {
      const online: Ref<boolean> = ref(false);
      const onNetworkChange = (status: boolean) => {
        online.value = status;
      };
      return { online, onNetworkChange };
    },
  });
</script>
<style>
  @import 'v-github-icon/dist/v-github-icon.css';
</style>

API

Props

Name Type Required? Default Description
online-class String No '' Styling the div which you want to give if you're online.
offline-class String No '' Styling the div which you want to give if you're offline.
ping-url String No https://google.com Pinging any url to double check if you're online or not.

Events

Name Returns Description
@detected-condition String Emits a boolean value

Contributing

  1. Fork it ( https://github.com/vinayakkulkarni/v-offline/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

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

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

License

FOSSA Status