Painless way to detect if your Vue app is offline 😎

Introduction 🎢

To make it easy and practical we use v-offline a npm module to detect offline and online events for your vue app, discarding a need to handle these envents with event listener.

We use a toast to indicates it, for this we will install bootstrap-vue a npm module too, you can see more about in documentation.

Installs

Execute this commands to add into your Vue application:

NPM

 npm i --save v-offline bootstrap-vue

YARN

yarn add v-offline bootstrap-vue

Warning that the internet has fallen

Let's create a component to handle this 😉

Where we will implement v-offline, just import it and bind it with whatever method name I find convenient, in my case I used handleConnectivityChange inside Vue methods, returning to us false if is offline and true if is online, finally we'll show a toast with bootstrap-vue to indicates our state.

<template>
    <div  id="app">
        <Offline @detected-condition="handleConnectivityChange">
        </Offline>
    </div>
</template>
<script>
import Vue from 'vue'
import Offline from  'v-offline'
import BootstrapVue from 'boostrap-vue'

Vue.use(BootstrapVue)

export  default {
    components: { Offline },
    mounted () {},
    methods: {
        handleConnectivityChange (status) {
            if (!status) { this.toast('b-toaster-top-full') }
        },
        toast (toaster, append  =  false) {
            this.$bvToast.toast(`Você está offline.`, {
                title:  `Conexão perdida!`,
                toaster: toaster,
                solid:  true,
                appendToast: append
            })
        }
    }
}

</script>

If you don't know much about Vue, I recommend the documentation which is an incredible and well explanatory reference for those just starting out.

Feel free to manipulate these states as you please, for today is just, see you next time, thank you for reading 🍻.