V-Offline ⚡️

Live demo · npm · JSR

⚠️ 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 – pnpm add v-offline@latest
• For Vue >=2.7 version – pnpm add v-offline@legacy
• For Vue <2.7 version – pnpm add [email protected]

Table of Contents

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

Demo

Live demo: v-offline.vinayakkulkarni.dev. The demo source is in example/. Run it locally with pnpm run demo:dev.

Requirements

• vue ^3.x

Installation

pnpm add v-offline ping.js

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

Build Setup

# install dependencies
$ pnpm install

# package the library
$ pnpm run build

# build the demo and deploy it to Cloudflare Workers
$ pnpm run deploy

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

<script setup lang="ts">
  import { ref } from 'vue';
  import { VOffline } from 'v-offline';

  const online = ref(navigator.onLine);
  function onNetworkChange(status: boolean) {
    online.value = status;
  }
</script>

<template>
  <VOffline
    online-class="online"
    offline-class="offline"
    @detected-condition="onNetworkChange"
  >
    <p>{{ online ? 'You are online' : 'You are offline' }}</p>
  </VOffline>
</template>

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

More from the author

• v-tweakpane — Vue 3 wrapper for Tweakpane GUI panels
• v-pip — Vue 3 wrapper for the Picture-in-Picture API
• v-intl — native Intl formatting components for Vue 3
• v-clappr — Vue 3 wrapper for the Clappr media player
• nxui — animated copy-paste UI components for Vue 3 and Nuxt
• shadscan-vue — UI-fundamentals audit for shadcn-vue apps

See every project at vinayakkulkarni.dev/projects and geoql.in.

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