Package Exports

v-offline

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-offline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 🎓

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