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! 😎
Top comments (0)