How to Monitor Internet Connectivity in Your Nuxt 3 Application

Letting users know when their browser is offline can greatly improve the user experience of your web application. A great example of this can be found in youtube when your browser is not connected to the internet and you try to navigate away. You get a UI that looks something like this:

Doing this in your Nuxt 3 app is quite straightforward, and this article outlines two ways it can be done.

Approach 1: Using the "offline" and "online" window events

The first approach involves using the "offline" and "online" events. These events are fired when your browser has lost(offline) or gained access (online) to the internet. Let's see how this can be done in Nuxt.

First step, install nuxt

npx nuxi@latest init <project-name>

Now that you have selected your preferred configurations and nuxt is installed, add the following to app.vue.

<script setup>
onMounted(() => {
  // Option 1: Using the offline event
  window.addEventListener("offline", (e) => {
    //displays an error when the browser is not connected to the internet
    showError({ message: '⚠️ You are not connected to the internet!', statusCode: 503 });
  });
});
<script/>

The code above adds an "offline" event that detects when the browser disconnects from the internet. The method showError, when called, triggers the error UI and passes it's arguments as props to the error component.

Let's create the error component next, create a new file at the root of your application and name it error.vue. Enter the following code:

<script setup>
defineProps({
  error: Object
})
</script>
<template>
    <div>
        <h1>{{ error.statusCode }}</h1>
        <p>{{ error.message }}</p>
    </div>
</template>

The error object contains the arguments of the showError method. These can them be accessed and displayed to the user.

But wait, this is good and all but how do we know when the browser is back online? 🤔
This is done by adding the following code to the script in ~/error.vue.

onMounted(() => {
    window.addEventListener("online", (e) => {
        //clear the error once the application detects an online connection
        clearError({ redirect: '/' });
    });
});

Once the browser is back online, the "online" event fires and the clearError method in it clears the the errors and redirects the user to the home page.

Approach 2: useOnline from VueUse

The second approach is to use the useOnline method that returns a reactive online state.

Assuming you have installed Nuxt.
First step, install the @vueuse/core package:

yarn add @vueuse/core

Next, add the following to the script of app.vue.

import { useOnline } from '@vueuse/core'

const online = useOnline();

watch(online,(newValue, oldValue) => {
  if (!newValue) {
    showError({ message: '⚠️ You are not connected to the internet!', statusCode: 503 });
  }
});

The watch function in the above code detects changes in the value of online and triggers the callback whenever these changes occur i.e. browser connects to or disconnects from the internet. In the callback the showError method, used in the same way we saw in the first approach, triggers the error UI.

Clearing the error and returning the user back to the home page can easily be done by adding this code to the script in ~/error.vue:

import { useOnline } from '@vueuse/core'

const online = useOnline();

watch(online,(newValue, oldValue) => {
  if (newValue) {
    clearError({ redirect: '/' });
  }
});

You can read more about handling errors in Nuxt3 here: https://nuxt.com/docs/getting-started/error-handling

You can access the code used in this article here: https://github.com/Fola-rin/nuxt3-network-error-implementation

And that's it! Now you know how to monitor internet connectivity in your Nuxt 3 App.

Thanks for reading! 😎