CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsserver-side-renderingnuxt3.js
sporadic-urchin
sporadic-urchin

Reputation: 95

How do I implement custom error pages in NuxtJS 3?

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.org/docs/directory-structure/layouts

Upvotes: 1

Views: 7986

Answers (2)

Ilya Degtyarenko
Ilya Degtyarenko

Reputation: 1589

https://v3.nuxtjs.org/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>

Upvotes: 4

Kim
Kim

Reputation: 41

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

Upvotes: 1

Related Questions