I'm trying to get my NuxtJS 3 app to show custom error pages. The app is universal with SSR. The NuxtJS 2 docs say to add a layouts/error.vue file and it should get picked up. However, while using NuxtJS 3, my custom page is never shown - either through a hard reload or navigating to a broken link with a <NuxtLink> via the router.

Have custom error pages in NuxtJS 3 changed? There doesn't seem to be any documentation on them in the docs

I'm trying to get my NuxtJS 3 app to show custom error pages. The app is universal with SSR. The NuxtJS 2 docs say to add a layouts/error.vue file and it should get picked up. However, while using NuxtJS 3, my custom page is never shown - either through a hard reload or navigating to a broken link with a <NuxtLink> via the router.

Have custom error pages in NuxtJS 3 changed? There doesn't seem to be any documentation on them in the docs https://v3.nuxtjs/docs/directory-structure/layouts

• javascript
• vue.js
• nuxt.js
• server-side-rendering
• nuxt3.js

• 1 Maybe give a look to this one: github./nuxt/framework/discussions/559 – kissu Commented Nov 25, 2021 at 16:54
• Thank you @kissu it seems custom error pages are still a work in progress. NuxtJS 3 is still in beta at the time of this writing. – sporadic-urchin Commented Nov 25, 2021 at 17:10
• Yep exactly. Some stuff still needs to be figured out by the maintainer/munity! – kissu Commented Nov 25, 2021 at 17:30

2 Answers 2

https://v3.nuxtjs/guide/features/error-handling/#example

You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop - error which contains an error for you to handle.

./error.vue (alongside app.vue)

<template>
  <button @click="handleError">Clear errors</button>
</template>

<script setup>
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

If you add the error page in the root and not in the layouts folder, it works!