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.
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 to bind the reactive property
status to the
$online property in every component. (👉Here's the code)