[FIXED] How to disable Nuxt's inbuilt error handling?

Issue

Nuxt error handling works excellent locally, but it causes some issues in production. I'm looking for a way to completely disable Nuxt's inbuilt error handling; I created a custom error page that is redirected by Nginx configuration.

Right now when you're being redirected to the error page, nuxt's default error message is being presented together with the custom error page I created; here's an image:

I tried searching online, but all I found were some 'hacks' and unorthodox ways to solve this problem.

Is there a clean, better way to disable Nuxt error handling? Is there a way to disable Nuxt's default message?

Solution

Problem solved by doing those changes:

---

1. Add this generate line into your nuxt.config.js:

generate: { fallback: '404.html' }

You can read about it here: Nuxt - The generate Property.

---

2. Insert your error.vue file into the pages folder. Don't include a subfolder called error, don't create a subfolder at all. Just place it inside as he is. It should be treated as a page.

📦website
 ┣ 📂assets
 ┣ 📂components
 ┣ 📂layouts
 ┣ 📂modules
 ┗ 📂pages
   ┣ 📂about
   ┣ 📂use-cases
   ┣ 📜error.vue  <---
   ┗ 📜index.vue
 

---

3. Add a basic layout to your layouts folder. If you don't have a layouts folder, create one. I recommend understanding how layouts work in Nuxt: Nuxt - Layouts directory.

<template>
  <div>
    <slot />
  </div>
</template>

Answered By - ChenBr

Answer Checked By - Marie Seifert (PHPFixing Admin)