DEV Community

Shi Ling for Uilicious

Posted on • Originally published at uilicious.com

vue-online-prop - Am I online? A tiny VueJS plugin (<1kb).

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)
Enter fullscreen mode Exit fullscreen mode

Usage:

<div v-if="!$online"> 
    You are currently offline!
</div>
Enter fullscreen mode Exit fullscreen mode

Tada.

I added a offline indicator!

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)

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

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.