Rendering Errors in Our App
Learn how to handle errors in our Nuxt project.
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:
Press + to interact
The default Nuxt error page
The number 500 is ...