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-offlineCDN: 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? | Description |
|---|---|---|---|
slot-name | String | No | 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. |
✅ 👂 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).
vinayak.pw · GitHub @vinayakkulkarni · Twitter @_vinayak_k
