v-offline
v3.5.0
Published
Offline and Online components for Vue
Downloads
6,600
Maintainers
Readme
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 [email protected]
Table of Contents
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
- Fork it ( https://github.com/vinayakkulkarni/v-offline/fork )
- Create your feature branch (
git checkout -b feat/new-feature
) - Commit your changes (
git commit -Sam 'feat: add feature'
) - Push to the branch (
git push origin feat/new-feature
) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- 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