Custom Error Pages with nuxt.js
If you’ve been working with Nuxt lately you will know how powerful, awesome and east it is to use. It’s by far the best framework for Vue to get up and running for your next SPA.
And then bam, you hit a javascript error and you get served with the default gray nuxt error page with the nuxtjs label in the bottom left hand corner.
Half of your site is missing and you’re left to refresh the page because all functionality at this point has broken.
Searching Google for ‘custom error page in nuxt’ just yeilds github issues that will get you no closer to solving your problem. The best way is just to RTFM. Yes, read the f**king manual. I learnt this the hard way, ha!
So, to make this easier for you I’ve outline what you need to do below:
Step 1: Handling your Errors
As outlined by the nuxt documentation you can call upon error inside asyncData() to return a nice formatted error back to nuxt.
export default {
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'Post not found' })
})
}
}Step 2: Create your custom error page
Now, this is where it gets a little weird. The nuxt docs outline that you must create a custom layout view however, it’s not a layout. It just has to live there.
Do not include <nuxt /> inside this template file, treat it exactly as a normal page view. The error object is passed down through props.
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template><script>
export default {
props: ['error'],
layout: 'blog' // you can set a custom layout for the error page
}
</script>
Remember the call we made to error previously error({ statusCode: 400, message: 'Post not found' }); The error object now has statusCode and message available for us to use.
<h1 v-if="error.statusCode === 404">Page not found</h1>
And that’s it, you can test this by going to a route that doesn’t exist in your nuxt app and you should get your new custom error page.
Bonus Round
If you’re like me, you will want to setup some additional components to manage different error states. This keeps our code nice and clean too.
./layouts/error.vue
<template>
<div class="nuxt-error">
<component :is="errorPage" :error="error" />
</div>
</template><script>
import error404 from '~/components/error/404.vue';
import error500 from '~/components/error/500.vue';export default {
name: 'nuxt-error',
layout: 'default', // optional
props: {
error: {
type: Object,
default: () => {},
},
},
computed: {
errorPage() {
if (this.error.statusCode === 404) {
return error404;
} // catch everything else
return error500;
},
};
</script>
./components/error/404.vue
<template>
<div class="error-404">
<h1>This page doesn’t exist</h1>
<p>The link you clicked on may be broken or no longer exist.</p>
</div>
</template><script>
export default {
name: 'error-404',
props: {
error: {
type: Object,
default: () => {},
},
},
};
</script>
That’s it!
Go forth and catch errors gracefully and make them look amazing!
