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 ``` Now that you have selected your preferred configurations and nuxt is installed, add the following to `app.vue`. ```javascript ``` 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! 😎

{{ error.statusCode }}

folarin_32

How to Monitor Internet Connectivity in Your Nuxt 3 Application

Join Our Newsletter. No Spam, Only the good stuff.