<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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.