V-Offline
⚡
-
Detect offline & online events for your vue app.
-
This is on GitHub so let me know if I've b0rked it somewhere, give me a star
⭐ if you like it🍻 -
Demo here ->
💯 Webpackbin Link
Requirements
- Vue.js 2.x
✅
Install
👌
npm install v-offline
# or
yarn add v-offline
CDN: UNPKG | jsDelivr (available as window.VOffline)
✅
Usage
🎓
Register the component globally:
Vue.component('VOffline', require('v-offline'));
Or use locally
import VOffline from 'v-offline';
✅
Example 1
🍀
HTML
<v-offline
online-class="online"
offline-class="offline"
@detected-condition="amIOnline">
<template v-slot:[onlineSlot] :slot-name="onlineSlot">
( Online: {{ onLine }} )
</template>
<template v-slot:[offlineSlot] :slot-name="offlineSlot">
( Online: {{ onLine }} )
</template>
</v-offline>
JS
import VOffline from 'v-offline';
Vue.component('example-component', {
components: {
VOffline
},
data: () => ({
onLine: null,
onlineSlot: 'online',
offlineSlot: 'offline',
}),
methods: {
amIOnline(e) {
this.onLine = e;
},
},
});
CSS
.offline {
background-color: #fc9842;
background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}
.online {
background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}
✅
📖
Props
| Name | Type | Required? | Default | Description |
|---|---|---|---|---|
slot-name |
String | No | 'online' | The name of the slot, refer to the v-slot docs |
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 | Description |
|---|---|
detected-condition |
Emits an Boolean value which can be used for multiple purposes in your app. |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Author
v-offline © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
GitHub @vinayakkulkarni · Twitter @_vinayak_k
