Nuxt is an awesome framework, build on top of another awesome framework, Vue, with a powerful structure that cover mostly everything you want and need, it allows you to do both, SPA, SSR and SSG.
Nuxt's Static Site Generation provider a set of default pages to help you, (root) index.html, 200.html and 400.html.
But image the case: you need to get rid of 200 and 400, for any reason like you need to merge nuxt generated pages into a already in production page/application (e.g. PHP legacy code and Nuxt new generated pages).
But these pages are hardcoded into Nuxt, so how would we avoid to get rid of then?
We can of course do a rm 200.html
for example after the build, but lets image this scenario:
A legacy application that you are page by page migrating to Nuxt, using SSG facilitates your work because it will generate the same PHP/NGNIX structure: base HTTP directory driven routing.
Perform the build and after the rm 200.html
rm 404.html
rm index.html
can be a pain and even may not work as expected: if we have the same pages on the legacy application root.
At Nuxt discussion page we can see a entry related to it Disable 200.html and 404.html #18831, but the solution there do not work.
You may think _"not a problem i can extend the routes and remove then". Well... that not work cuz they aren't a route on your project, and this happens in a lower layer than routes, on nitro. Nitro is the web server that powers Nuxt, but you probably already know that.
Till today (Jan/24/2025) Nuxt has not yet got it into its docs: https://nuxt.com/docs/guide/concepts/rendering#deploying-a-static-client-rendered-app and states that these pages are default with no option to undo that:
The Solution
After dig a little into the Nuxt's code, we can see the are add into the Nitro's hook: 'prerender:routes'
, this hook Taking a look into nitro pre render hook interface we can see it has a skip
property, and its implementation is pretty straight forward and what we are lookin for:
\\ https://github.com/nitrojs/nitro/blob/main/src/core/prerender/prerender.ts
// Check if route is skipped or has errors
if (_route.skip || _route.error) {
await nitro.hooks.callHook("prerender:route", _route);
nitro.logger.log(formatPrerenderRoute(_route));
dataBuff = undefined; // Free memory
return _route;
}
With that knowledge we can safely skit the generation of this files by doing at your nuxt.config.ts
export default defineNuxtConfig({
ssr: false,
nitro: {
hooks: {
"prerender:generate"(route) {
const routesToSkip = ['/200.html', '/404.html'];
if (routesToSkip.includes(route.route) ) {
route.skip = true;
}
},
},
},
})
In my case i even need the general root index on it: const routesToSkip = ['/200.html', '/404.html', 'index.html'];
And now we have a SSG dist generation without the default Nuxt pages:
Top comments (0)