Nuxt generate error page

I currently use prerendering all pages and upload them to s3. Hot should the error page be handeled when doing this? I have an error.vue file that fetches the content for this page, but it is not prerendered
14 Replies
manniL
manniL4mo ago
yes, that's how it goes. An "SPA-like" fallback that is pre-rendered but without content and generates it on demand should be 200.html or 404.html by default
thomas_bitcraft
thomas_bitcraft4mo ago
@manniL / TheAlexLichter Yes but the content of the page is not prerendered therefore empty. I tried to prerender it by making a custom route: routes.push({ name: error, path: '/error', file: '~/error.vue', }); This works in theorie - but now the browser url is rewritten to /error when i get an 404. Is it possible to disable this?
manniL
manniL4mo ago
GitHub
support prerendering error pages · Issue #18718 · nuxt/nuxt
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 (wher...
thomas_bitcraft
thomas_bitcraft4mo ago
So there is currently no way to prevent the url rewrite right? @manniL / TheAlexLichter
manniL
manniL4mo ago
you could define an own [...slug].vue which can act as catch-all. But more or less the same problem. Are you in need of a static error page?
thomas_bitcraft
thomas_bitcraft4mo ago
Yes, this page is used as a fallback for a static page hosted in the aws s3. In general, it works now, but the URL rewrite is kind of ugly.
manniL
manniL4mo ago
But you definitely can’t use a dynamically generated one?
thomas_bitcraft
thomas_bitcraft4mo ago
better would be a prerendered one to prevent the API delay
thomas_bitcraft
thomas_bitcraft4mo ago
@manniL / TheAlexLichter In general the behavior is strange if I use the 404.html directly. I linked now the 404.html as fallback: https://www.wenatex.com/de/de/asdasdasd - but it seems it does not use the logic in the error.vue file, but uses pages/[...slug].vue which is my default pagebuilder site does not load any content. If I call it directly it works: https://wenatex-website.s3.eu-central-1.amazonaws.com/404.html - but takes a lot of time And this would be my custom prerendered error page, but there the path is changed to /error as soon as the page is loaded: https://wenatex-website.s3.eu-central-1.amazonaws.com/error-page.html So all options are not really good 😅
manniL
manniL4mo ago
oh well, if you have a [...slug].vue, you have to deal with handling the errors "on your own" (e.g. throw a fatal one there if the API call didn't succeed) Because the catch-all matches all the routes then
thomas_bitcraft
thomas_bitcraft4mo ago
alright thanks for all the help - maybe in the future there will be a way to prerender the error page, or to disable the url rewrite "feature".
manniL
manniL4mo ago
I mean, the rewrite is caused because you defined it. You can through a fatal error in your ...slug.vue for a more dynamic handling but the error page will always be an SPA fallback as that logic has to be executed somewhere if there is no "static file" matching the route so let's say you enter /users/1 -> /users/1/index.html will be used but /users/jawiodjaosif might not have a static file prerendered. Now the fallback file will be used, which is SPA-style, so it could do anything ,e.g. * It could show another user which wasn't prerendered * The fallback could show a 404 page * The fallback could show something totally different based on your logic
thomas_bitcraft
thomas_bitcraft4mo ago
Sure this makes sense for a lot of cases. But if I generate everything and I want to always show my predefined 404 page if the file is not found in my file storage it would be nice to have the option to define a prerendered page for that
manniL
manniL4mo ago
yes, absolutely! That's why the issue is there! One manual workaround would be emitting your own custom 404.html but it wouldn't be an SPA then