Skip to content

Releases: vinayakkulkarni/v-offline

1.0.4 (Minor release)

21 Sep 08:05
Compare
Choose a tag to compare
  • Added the beforeDestroy vue hook to ensure that the listener is removed from your component.

version 1.0.3

20 Sep 07:14
Compare
Choose a tag to compare
  • Removed the ui success message & ui error message default classes as they were framework specific.
  • Added DOM test

Init 6

15 Sep 09:05
Compare
Choose a tag to compare

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

  • Website made with this: Here

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