vinayakkulkarni / v-offline

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

V-Offline ⚡️

⚠️ 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

• V-Offline ⚡️
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
    • Usage
    • Example
  • API
    • Props
    • Events
  • Contributing
  • Author
  • License

Demo

Requirements

• vue ^3.x

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