DEV Community

Alan Schio
Alan Schio

Posted on

Mastering Nuxt hooks - Disable SSG default pages (200, 400) .

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:

Nuxt Static Cliente Rendered - Docs

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;
    }

Enter fullscreen mode Exit fullscreen mode

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;
        }
      },
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

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:

Image description

Top comments (0)