How to handle HTTP error codes (404) on the frontend-side in Nuxt 3?

Question

In Nuxt 2, a layouts/error.vue component is used. I tried with Nuxt 3 but it didn't work out.

I can not find it in the documentation (https://v3.nuxtjs.org/guide/directory-structure/pages, https://v3.nuxtjs.org/guide/directory-structure/layouts)

Any ideas ?

Answer 1

I think you could just add simple a 404 component inside your pages folder:

pages -> 404.vue

// 404.vue
<template>
  <div class="container">
    <h1>Page not found</h1>
    <a href="/">Go Back</a>
  </div>
</template>

---

alternative if you got a SPA:

create an error.vue component inside your root-folder. Like in this example.

---

edit:

Writing an error.vue-file inside the root-folder works and the error object can be passed as prop to this component. The object as the following type:

error: { 
  url: string; 
  statusCode: string; 
  statusMessage: string; 
  message: string; 
  description: string; 
  data: any; 
}