Nuxt.js static site and 404 page

Question

I have currently created a pages/404.vue file, then, in my server settings, I redirect any non existent url to /404.html (the generated page).

Apart me having to declare the file extension (it gives me redirect error if I redirect to /404), it seems to work fine, and I guess it will also give me an easy way to create other server error files, if needed.

However, following the documentation, I first tried adding fallback: true inside generate:{ }. This creates a 404.html page in my root, but using a default Nuxt layout (an infinite loading wheel page).

I assumed that creating layouts/error.vue (as per docs) would do the trick, but didn't seem the case.

What is the right practice, and, if the documentation one is to follow, why my personalised error.vue wasn't working? Thanks.

Answer 1

No answers received.

I removed the pages/404.vue in the end and created it as layouts/error.vue

error.vue was giving me erros related to default.vue, for some reasons, so I created a layouts/basic.vue layout as an (almost) empty container for error.vue.

The error page now works during dev and during the new nuxt start local testing on full static site (since nuxt 2.13), but still not on the live site, which I will check if related to server settings.

the above goes together with generate: { fallback: true } in nuxt.config.js (which creates the 404.html page)

Answer 2

In order to generate a 404 fallback page in nuxt.js you need to first set the generate option in your nuxt.config.js like this generate: { fallback: '404.html' }

Then you need to create a new layout called error.vue in your layouts directory

layouts/error.vue

After you have done this you can nuxt generate followed by nuxt start to run your project with a fallback page for the 404 error.