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:
- 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:
Use
<NuxtErrorBoundary>
as it's defined in the documentation.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']
}
}