Nuxt Error Handling

up:: Nuxt


Errors can happen in two places:

  1. Client-side
  2. Server-side
throw createError("Could not update");
throw createError(
	message: "Chapter not found",
	statusCode: 404,


Error Boundaries


Error boundaries help to isolate errors. It is easier to locate where the error was thrown.

	<button @click="throwError"> Throw Error

This prevents errors to bubble up throughout the whole app. It catches it and renders the error slot.

<template #error="{ error }">
	<p>Oh no, something broke!</p>
	<code>{{ error }}</code>
<template />

Clearing the error

Getting rid of the error is a simple case of setting the error.value = null.


Is handled by error.vue.

<script setup>
const error = useError();
const handleError = () => {
		redirect: "/"