Forem

Alan Schio
Alan Schio

Posted on

2 1

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (1)

Collapse
 
wjndy4 profile image
wjndy4

thank you

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay