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...
import VueOnlineProp from "vue-online-prop" Vue.use(VueOnlineProp)
<div v-if="!$online"> You are currently offline! </div>
(Extras) How it is made
navigator.onLine, and listen to changes to the connectivity using the
offline events on the window.
👉MDN docs on
Creating the VueJS plugin
This plugin simply listens to the
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 bind the reactive property
status to the
$online property in every component. (👉 Here's the code)