0

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: enter image description here enter image description here

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?

kissu
  • 40,416
  • 14
  • 65
  • 133
ChenBr
  • 1,671
  • 1
  • 7
  • 21

1 Answers1

1

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.

  1. 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
  1. 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>
ChenBr
  • 1,671
  • 1
  • 7
  • 21
  • Damn, how did you generated this kind of structure (with the folders)? Using a specific website or doing by hand? – kissu Sep 02 '22 at 12:59
  • 1
    @kissu This is my first time creating a folder structure, so I just googled `stackoverflow folder structure` which brought me to this [comment](https://stackoverflow.com/a/57086391/17718587). I created this structure by hand, but there seems to be an extension doing precisely that; I didn't test it out yet. – ChenBr Sep 02 '22 at 13:05