Skip to content
🔌 Simple VueJS component to detect offline & online changes.
JavaScript Vue
Branch: master
Clone or download
vinayakkulkarni Merge pull request #21 from vinayakkulkarni/dependabot/npm_and_yarn/e…
…slint-utils-1.4.2

Bump eslint-utils from 1.3.1 to 1.4.2
Latest commit 9f8194e Aug 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Added `commonjs()` plugin while building the package Mar 17, 2019
dist Updated distribution Mar 18, 2019
example Updated example Mar 18, 2019
src 💯 Update the package Mar 18, 2019
test Updated Tests Mar 18, 2019
.babelrc Chore: Housekeeping Mar 17, 2019
.editorconfig 🔍 Added README.md Sep 14, 2017
.eslintrc.js Chore: Housekeeping Mar 17, 2019
.gitattributes Initial commit Sep 14, 2017
.gitignore updated folder structure Jul 24, 2018
.prettierrc Chore: Housekeeping Mar 17, 2019
.travis.yml Travis CI Sep 14, 2017
LICENSE Initial commit Sep 14, 2017
README.md Updated docs Mar 18, 2019
karma.conf.js Updated `karma` Mar 18, 2019
package-lock.json Bump eslint-utils from 1.3.1 to 1.4.2 Aug 26, 2019
package.json Updated dependencies Mar 18, 2019

README.md

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 can’t perform that action at this time.