JSPM

  • Created
  • Published
  • Downloads 1020
  • Score
    100M100P100Q102261F

Offline and Online components for VueJS

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

Build Status

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

✅ Install 👌

npm install v-offline
// or
yarn add v-offline

✅ Usage 🎓

Register the component globally:

Vue.component('offline', require('v-offline'));

Or use locally

import offline from 'v-offline';

✅ Example 🍀

<offline v-on:detected-condition="detected">
    <div slot="online">
        Your Online Content!
    </div>
    <div slot="offline">
        Your Offline Content!
    </div>
</offline>
Vue.component('example-component', {
    data() {
        return {
            state: null,
        }
    },
    methods: {
        detected(e) {
            this.state = e;
        }
    }
});

✅ 📖 Props

Name Type Default Required? Description
onlineClass String ui success message No Styling the div which you want to give if you're online.
offlineClass String ui error message 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.

NPM :octocat:

NPM