Nuxt Tip: Handle Client-Side Errors

Nuxt will display a generic error page if an error occurs on the client-side. You often don't want to show a fullscreen error page but the error at a specific place in your app. Therefore, Nuxt provides the <NuxtErrorBoundary> component:

1<template>
2  <NuxtErrorBoundary>
3    <AnyComponent/>
4  </NuxtErrorBoundary>
5</template>

<NuxtErrorBoundary> will catch all errors in its default slot.

You can use the #error slot to display the error to the user. It provides an clearError function to clear the error and display the children again:

1<script setup lang="ts">
2const onError = (error: Error) => {
3  // Here you can try to resolve the error
4}
5</script>
6
7<template>
8  <NuxtErrorBoundary @error="onError">
9    <AnyComponent/>
10
11    <template #error="{ error, clearError }">
12      An error occurred: {{ error.message }}
13      <button @click="clearError">
14        Try again
15      </button>
16    </template>
17  </NuxtErrorBoundary>
18</template>

1<script setup lang="ts">
2const recoverFromError = async (error) => {
3  await navigateTo('/');
4  error.value = null;
5}
6</script>

Check out this live example that demonstrates how to handle errors in different contexts: pages, plugins, components and middleware.