Nuxt: No page component found during Nitro static generation of dynamic routes

Nitro's nitro.prerender.routes (and the legacy generate.routes) does not support glob patterns or placeholders. It requires an explicit list of absolute paths. The "No page component found" error occurs when Nitro is instructed to prerender a path that does not map to a valid Vue component in the /pages directory, or when a dynamic route is requested without a corresponding file (e.g., [id].vue) to handle it.

Repeatable Pre-rendering for Dynamic Routes

To pre-render dynamic routes in a CI/CD pipeline without manually updating nuxt.config.ts, you must provide Nitro with a dynamic list of paths at build time. Since the config file supports JavaScript, you can fetch your route list from an external API or CMS during the configuration phase.

Implementation Pattern

Instead of a static array, use a function or a pre-fetched list within nuxt.config.ts. Note that since the config is evaluated during the build process, you can use async/await or a synchronous fetch to populate the routes.

export default defineNuxtConfig({
  nitro: {
    prerender: {
      // Use a function to dynamically resolve routes at build time
      routes: async () => {
        const response = await fetch('https://api.example.com/posts');
        const posts = await response.json();
        return posts.map(post => `/posts/${post.slug}`);
      }
    }
  }
})

Crawler-Based Discovery vs. Determinism

Nuxt's built-in crawler discovers routes by following <NuxtLink> components starting from the home page. While convenient, crawler-based discovery is not sufficient for deterministic CI/CD output for the following reasons:

• Orphaned Pages: Any dynamic page not linked from a previously discovered page will be ignored.
• Execution Order: Discovery depends on the crawl order; if a link is generated dynamically via client-side logic, the crawler may miss it.
• Verification: You cannot guarantee a complete set of pages without a source-of-truth list.

Verification and Troubleshooting

To verify that your dynamic routes are being generated correctly, use these scoped checks:

1. Build Log Inspection: Run npx nuxi generate and search the logs for the Prerendering section to confirm each dynamic path is listed as 200 OK.
2. Artifact Audit: Check the .output/public directory. Every pre-rendered dynamic route should have a corresponding index.html file in its respective folder (e.g., /posts/my-post/index.html).

Diagnostic Detail Needed: Are you using a custom app.vue without a <NuxtPage /> component? If the page component is missing from the layout hierarchy, Nitro will fail to resolve the component regardless of the route list.