๐Ÿ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple VueJS component to detect offline & online changes.

Other

Documentation

V-Offline โšก๏ธ npm version gzip size Build Status npm downloads

  • 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

โœ… 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? 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

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. 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


You May Also Like