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 π».