Search code examples
nuxt.jscustom-error-pagesstatic-site

Nuxt.js static site and 404 page


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.


Solution

  • 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)