How to Monitor Internet Connectivity in Your Nuxt 3 Application
Tags: nuxt, javascript, webdev
Published: 2024-04-14 12:38:11

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:


![Youtube error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdgh52svqu5tr55g5q10.png)

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 
```javascript
npx nuxi@latest init <project-name>
```

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

```javascript
<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:

```javascript
<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`.

```javascript
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`](https://vueuse.org/core/useOnline) method that returns a reactive online state.

Assuming you have installed Nuxt.
First step, install the [`@vueuse/core`](https://vueuse.org/guide/#installation) package:

```javascript
yarn add @vueuse/core
```
Next, add the following to the script of `app.vue`.

```javascript
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`:

```javascript
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](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](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! 😎