Build a Vue.js 3 Internet Network Offline or Online Detector Component in Browser Using TS

npm i v-0ffline

App.vue

<template>
  <v-offline
    online-class="online"
    offline-class="offline"
    @detected-condition="onNetworkChange"
  >
    <template v-if="online">
      <div class="flex w-full h-screen justify-center items-center text-6xl">
        ⚡️ Online
      </div>
    </template>
    <template v-if="!online">
      <div class="flex w-full h-screen justify-center items-center text-6xl">
        💩 Offline
      </div>
    </template>
  </v-offline>

  <!-- Netlify Badge -->
  <div class="absolute bottom-4 right-4">
    <a
      href="https://app.netlify.com/sites/v-offline/deploys"
      aria-label="View deploys on Netlify"
      target="_blank"
      rel="noopener noreferrer"
      class="gray-400"
    >
      <img
        src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
        alt="Deploys by Netlify"
      />
    </a>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from "vue";
import type { Ref } from "vue";
import { VOffline } from "v-offline";

export default defineComponent({
  components: {
    VOffline,
  },
  setup() {
    const online: Ref<boolean> = ref(navigator.onLine);

    const onNetworkChange = (status: boolean) => {
      online.value = status;
    };

    const updateOnlineStatus = () => {
      online.value = navigator.onLine;
    };

    // Listen for online and offline events
    onMounted(() => {
      window.addEventListener("online", updateOnlineStatus);
      window.addEventListener("offline", updateOnlineStatus);
    });

    // Cleanup the event listeners when the component is destroyed
    onUnmounted(() => {
      window.removeEventListener("online", updateOnlineStatus);
      window.removeEventListener("offline", updateOnlineStatus);
    });

    return { online, onNetworkChange };
  },
});
</script>

<style>
/* Full viewport height and centering the content */
.flex {
  display: flex;
}

.h-screen {
  height: 100vh;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.text-6xl {
  font-size: 4rem;
}
</style>

<v-offline

online-class="online"

offline-class="offline"

@detected-condition="onNetworkChange"

⚡️ Online

</div>

</template>

💩 Offline

</div>

</template>

</v-offline>

href="https://app.netlify.com/sites/v-offline/deploys"

aria-label="View deploys on Netlify"

target="_blank"

rel="noopener noreferrer"

class="gray-400"

<img

src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"

alt="Deploys by Netlify"

</a>

</div>

</template>

import { defineComponent, ref, onMounted, onUnmounted } from "vue";

import type { Ref } from "vue";

import { VOffline } from "v-offline";

export default defineComponent({

components: {

VOffline,

setup() {

const online: Ref<boolean> = ref(navigator.onLine);

const onNetworkChange = (status: boolean) => {

online.value = status;

};

const updateOnlineStatus = () => {

online.value = navigator.onLine;

};

// Listen for online and offline events

onMounted(() => {

window.addEventListener("online", updateOnlineStatus);

window.addEventListener("offline", updateOnlineStatus);

});

// Cleanup the event listeners when the component is destroyed

onUnmounted(() => {

window.removeEventListener("online", updateOnlineStatus);

window.removeEventListener("offline", updateOnlineStatus);

});

return { online, onNetworkChange };

});

</script>

<style>

/* Full viewport height and centering the content */

.flex {

display: flex;

}

.h-screen {

height: 100vh;

}

.justify-center {

justify-content: center;

}

.items-center {

align-items: center;

}

.text-6xl {

font-size: 4rem;

}

</style>

Build a Vue.js 3 Internet Network Offline or Online Detector Component in Browser Using TS

Comments

Leave a Reply Cancel reply

Archives