Seamless Connectivity - Implementing Online and Offline Detection in Vue.js

<template>
  <div id="app">
    <h1>
      {{
        !onLine
          ? 'You are Offline...'
          : showBackOnline
          ? 'Back Online...'
          : message
      }}
    </h1>
    <p>
      Learn more with the
      <a href="https://vuejs.org/" target="_blank" rel="noopener"
        >Vue Docs &amp; Resources</a
      >.
    </p>
    <button @click="doSomething">Say hello.</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      onLine: navigator.onLine,
      showBackOnline: false
    }
  },
  methods: {
    doSomething() {
      alert('Hello!')
    },
    updateOnlineStatus(e) {
      const { type } = e
      this.onLine = type === 'online'
    }
  },
  watch: {
    onLine(v) {
      if (v) {
        this.showBackOnline = true
        setTimeout(() => {
          this.showBackOnline = false
        }, 1000)
      }
    }
  },
  mounted() {
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
</style>