nuxt: support prerendering error pages

Describe the feature

Use case: Trying to use Nuxt3 as a static site generator, in combination with a headless CMS.

Setup: error.vue in project root, shared navbar/footer in layout/default.vue (where the headless CMS requests to fetch navbar/footer items happen)

In development, when browsing to a non-existing route, I get the error.vue properly between navbar and footer populated from the headless CMS
After deploying the generated pages, navigating to a non-existing route “deletes” the navbar/footer items. After taking a look into .output/public/404.html it turns out that it isn’t “fully” generated HTML but the document has an almost empty body and requires some script to fetch its content (and doesn’t properly render the layout?)

Additional information

Would you be willing to help implement this feature?
Could this feature be implemented as a module?

Final checks

Read the contribution guide.
Check existing discussions and issues.

About this issue

Original URL
State: open
Created a year ago
Reactions: 11
Comments: 17 (7 by maintainers)

Most upvoted comments

This will need to be supported upstream in nitro in the prerenderer, but we think this would be a nice feature to add. ❤️

+19

danielroe on Mar 1, 2023

Hey @Vahagn-Zaqaryan and @codeflorist (sorry for the late reply!)

So the closest solution for nuxt3 i have found is to create a custom 404.vue file in the /pages folder, next to the [[slug]].vue file (which creates a page for each of your headless CMS pages)… similar to my previous nuxt2 solution.

As this 404.vue is just a standard page (nothing to do with the error.vue fallback) - it will benefit from using the default layout and therefore get statically generated with your header / footer content from your CMS.

Note > the error.vue fallback will still be used when running the project in build or dev mode (dynamically), as API calls that fail will throw an error exception.

In order for your static site to display the static 404 page (no API calls!), you will need to configure your hosting to serve this if no page is found.

For an apache server (serving your static html files), you can set: ErrorDocument 404 /404/index.html (not 404.html - as this is the fallback)

Similarly for Azure static app:

{
  "navigationFallback": {
    "rewrite": "404/index.html"
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/404/index.html"
    }
  }
}

For some hosting we needed to tweak the pipeline, so it really knew that we didn’t want the fallback:

npm run generate
rm dist/404.html

PROS:

404 page doesn’t make any API calls!
Therefore any new pages published in the CMS won’t suddenly appear on your site until a proper generate has been triggered.

CONS:

Serving this 404 seems to update the browser url to /404 rather than e.g. /qqqqqqqqxxxxxx. Ideally the incorrect url would remain, so the user can correct a mis-spelling etc.

Let me know if this works for you, or you have any suggestions to improve further!

lukemorell on Feb 28, 2024

Hey @danielroe, is this planned?

kilobyte2007 on Aug 14, 2023

So it’s not a bug – got that. But more a feature request to have the option that a 404.html is generated with static content. Since currently, we cannot use the error.vue feature due to this. Should we create a seperate ticket then?

madebyfabian on Feb 11, 2023