3.5.0 • Published 4 days ago

v-offline v3.5.0

Weekly downloads
1,455
License
MIT
Repository
github
Last release
4 days ago

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

NameTypeRequired?DefaultDescription
online-classStringNo''Styling the div which you want to give if you're online.
offline-classStringNo''Styling the div which you want to give if you're offline.
ping-urlStringNohttps://google.comPinging any url to double check if you're online or not.

Events

NameReturnsDescription
@detected-conditionStringEmits 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

3.5.0

4 days ago

3.4.0

1 year ago

3.3.1

1 year ago

3.3.0

1 year ago

2.4.0

1 year ago

3.2.1

1 year ago

3.2.0

1 year ago

2.3.0

2 years ago

3.1.0

2 years ago

3.0.3

2 years ago

2.2.4

3 years ago

3.0.2

3 years ago

2.2.3

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.2.1

4 years ago

1.1.0

5 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago