loading...
Uilicious

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

shiling profile image Shi Ling Originally published at uilicious.com ・1 min read

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.

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)

Posted on by:

shiling profile

Shi Ling

@shiling

Co-creator of UI-licious | Full-stack dev-ing since pre-jQuery era | Used to do kung-fu, now I code-foo.

Uilicious

UI-licious is a complete solution for teams to rapidly set up end-to-end user journey tests and continuously monitor their web application.

Discussion

markdown guide
 

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.