I'm trying to implement a custom 404 page for my NUXT3 website that is deployed via NETLIFY.

I created "error.vue" inside the root folder and it's redirecting all errors to my custom 404 page, which is my desired behavior, but when I deploy the site to Netlify on the web it displays a page not found NETLIFY error.

Anyone that has already implemented a custom 404 Nuxt3 page for a website can help me with this?

Thanks in advance.

Netlify when 404 error:

Dev 404 error (desired behaviour):

CodePudding user response：

1. put a file named error.vue in the root directory of your nuxt project (beside ~/app.vue). Fill this file just like any component.

If problem still persists:

1. Use <NuxtErrorBoundary> as it's defined in the documentation.

2. For the netlify case, Add the following to the nuxt.config.js: Generate: { fallback: true } before building.

CodePudding user response：

I have the same problem.

I added this (see below) to my Nuxt config, as Netlify expects a 404.html file to show a custom error page. This change correctly redirects to the error page when trying to access a page that doesn't exist, but the status code the error page receives is 500 and not 404.

nitro: {
   prerender: {
     routes: ['/404.html']
   }
}