Tracking online/offline state in Vue

README.md

Uses the Vue composition API, but … doesn't really need to.

App.vue

<template>
  <main id="app">
    <h1>{{ isOnline ? "Online" : "Offline" }}</h1>
  </main>
</template>

<script>
import { useNetworkDetection } from "@/services/useNetworkDetection";

export default {
  setup() {
    const { isOnline } = useNetworkDetection();

    return {
      isOnline
    };
  }
};
</script>

main.js

import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";
import App from "./App.vue";

Vue.use(VueCompositionApi);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

useNetworkDetection.js

import { ref, onBeforeMount, onBeforeUnmount } from "@vue/composition-api";

export function useNetworkDetection() {
  const isOnline = ref(true);

  const listener = () => {
    isOnline.value = navigator.onLine;
  };

  onBeforeMount(() => {
    window.addEventListener("online", listener);
    window.addEventListener("offline", listener);
    listener();
  })

  onBeforeUnmount(() => {
    window.removeEventListener("online", listener);
    window.removeEventListener("offline", listener);
  });

  return {
    isOnline
  };
}