I just wanted one thing only and only one thing.
I just want a reactive property $online
in all my Vue components to tell me if the user is connected to the internet or not.
I know I know, there's already a bunch of existing vue-online
packages, but... No thanks, I don't need the extra UI components bundled in...
So I made vue-online-prop
(npm, github)
Setup:
import VueOnlineProp from "vue-online-prop"
Vue.use(VueOnlineProp)
Usage:
<div v-if="!$online">
You are currently offline!
</div>
Tada.
That's all!
(Extras) How it is made
How to check if I am online with Javascript
You can query the internet connectivity through Javascript using navigator.onLine
, and listen to changes to the connectivity using the online
and offline
events on the window.
๐MDN docs on navigator.onLine
Creating the VueJS plugin
This plugin simply listens to the online
and offline
events on the window, and sets the value of navigator.onLine
to a reactive property status
managed by the plugin. When the plugin is installed using Vue.use(VueOnlineProp)
, it adds a beforeCreate
mixin, which will to bind the reactive property status
to the $online
property in every component. (๐Here's the code)
Top comments (1)
This gives me a terrible idea. What if you could broadcast yourself as online to your website via a chrome extension talking to your website, then a chat could be initiated. Sort of the reverse of the post above.
It would be a bit of a privicy issue and would need to be one directional. Eg server sent events. anyway hypothetical, don't do this.