A Beginner’s Guide To Nuxt 3/

...

/

Error Helper Methods

Error Helper Methods

Learn about the built-in Nuxt error helper methods.

We'll cover the following...

We can use try and catch to handle errors when using async JavaScript code:

Press + to interact
try {
  // async code we want to run
}
catch(error) {
  console.log(error)
}

  • Lines 1–3: The try block will run first, and if successful, the catch block will not run

  • Lines 4–6: If any errors occur in the try block, the code in the catch block will run, and it will be passed the error object.

This is common in JavaScript; we can also use it in our Nuxt applications. In addition, Nuxt also provides some helper methods to use:

The createError helper method

This helper method can be called to cause an error in our Nuxt app:

<template>
	<button @click="throw createError('error created from component');">
		create error
	</button>
</template>
Handling errors with the NuxtErrorBoundary component

  • components/CreateError.vue

    • Line 2: A button throws an error using the Nuxt createError helper method. This will create an error object which can be caught with our error boundary.

The above example displays an error message as a string, but we can also set an object containing additional information: