Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Rendering Errors in Our App

Explore how to manage rendering errors in Nuxt 3 by creating custom error pages and using the NuxtErrorBoundary component for effective client-side error handling. This lesson shows you how to simulate errors, display user-friendly messages, and clear errors within your app for better user experience.

We'll cover the following...

Custom error page

When we have errors in our applications, we might want to provide a custom solution to display them to the user. The following code will fetch images using the Pixabay API. Inside pages/index.vue, we have simulated an error by commenting out apiKey:

<script setup>
const config = useRuntimeConfig()
// const apiKey = config.public.pixabayApiKey;

const { data: images } = await useFetch(
	`https://pixabay.com/api/?key=${apiKey}&q=sea`
);

</script>
<template>
	<ul class="images">
		<li v-for="image in images.hits" :key="image.id">
			<img class="img_preview" :src="image.webformatURL" />
		</li>
	</ul>
</template>
Fetch images from the Pixabay API

Run the code to generate the link, and click it to see the error in the browser.

  • Line 3: We comment out apiKey. This is required for the code to run correctly.

  • Lines 5–7: This is an API call to Pixabay to fetch images. This requires a valid apiKey.

Run the code and open the project in the browser, where you will see the default Nuxt error page:

The default Nuxt error page
The default Nuxt error page

The number 500 is a server error code that occurs when an error prevents ...