Nuxt content does not prerender pages

[keen isle]

Hi @round tartan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This issue is common when using Nuxt Content with static site generation (npx nuxt generate). In development, Nuxt runs a server that can handle dynamic routes like /docs/[...slug], but when you generate a static site, only the routes discovered by the crawler or explicitly listed in your configuration are pre-rendered. If a route isn't pre-rendered, opening it directly (e.g., by entering the URL manually) will result in a "page not found" error, because the static file for that route doesn't exist.

How to fix:

1. Ensure all needed routes are pre-rendered:
   Nuxt's crawler only pre-renders routes it can discover by following <a href="..."> links from your pages. If some content pages are not linked anywhere, they won't be generated.

   • You can manually specify additional routes to pre-render in your nuxt.config.ts:

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: [
           '/docs/page1',
           '/docs/page2',
           // Add all your important docs routes here
         ]
       }
     }
   })
   

   Or, if you want to pre-render all routes under /docs, you can use route rules:

   export default defineNuxtConfig({
     routeRules: {
       '/docs/**': { prerender: true }
     }
   })
   

   Read more about pre-rendering and route rules.

2. Catch-all routes and static hosting:
   If you are using a catch-all route like pages/docs/[...slug].vue, make sure your static host is configured to serve index.html (or 200.html) for all unknown routes, so that Nuxt can handle the routing client-side. Some hosts require you to set up a rewrite rule for this.
   See more about static hosting and fallback files.

3. Limitations:

   • If you use nuxt generate, hybrid rendering (dynamic SSR for some routes) is not available. All routes must be statically generated or handled client-side only.
   • If you open the static files directly from the filesystem (e.g., double-clicking index.html), routing will not work properly. You must serve the files with a static server (e.g., npx serve .output/public) as explained here.

Summary:

• Make sure all your content routes are either linked from other pages or explicitly listed in the prerender.routes array or routeRules.
• Configure your static host to handle client-side routing for catch-all routes.
• Always use a static server to preview your generated site.

If you follow these steps, your Nuxt Content pages should be accessible both via NuxtLinks and by entering the URL directly after deployment.

Prerendering in Nuxt
Static Hosting with Nuxt Content
Catch-all routes and ContentRenderer usage

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

Nuxt content does not prerender pages

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

The command

npx nuxt generate

is used to pre-render every route of your Nuxt application and store the result as plain HTML files. This is known as static site generation (SSG). After running this command, you can deploy the generated files (found in .output/public) to any static hosting service. The command works by crawling your site, starting from the root and following links, and pre-renders all discoverable pages. You can also manually specify additional routes to pre-render in your nuxt.config.ts if needed. This is especially important for dynamic or catch-all routes that may not be linked directly from other pages nuxt generate command Prerendering.

Example usage:

npx nuxt generate

After generation, preview your site locally with:

npx serve .output/public

Remember, if you open the generated HTML files directly from the filesystem (e.g., double-clicking), routing and interactivity may not work as expected. Always use a static server to preview or deploy your generated site Stack Overflow: static page issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle Pre-rendering all pages does not work, probably because it is [...slug] and Nuxt does not know which pages to pre-render because they are in the content folder and not in the pages folder.

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

You are correct: when using a catch-all route like pages/docs/[...slug].vue, Nuxt’s static site generation (npx nuxt generate) cannot automatically discover which dynamic routes to pre-render, especially if the actual routes are determined by the content files in your content/ directory. The crawler only finds routes that are linked from other pages, so any content pages not directly linked will not be pre-rendered by default Prerendering.

Solution:
You need to explicitly tell Nuxt which routes to pre-render. This can be done by configuring the nitro.prerender.routes array in your nuxt.config.ts. For example, you can programmatically read your content directory and add all relevant slugs to the prerender list:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/docs/page1',
        '/docs/page2',
        // ...add all your content slugs here
      ]
    }
  }
})

Or, you can use a Nuxt hook to dynamically add routes before prerendering, for example by fetching a list of slugs from your content source:

export default defineNuxtConfig({
  hooks: {
    async 'prerender:routes'(ctx) {
      // Example: fetch slugs from your content source
      const slugs = ['page1', 'page2']; // Replace with actual logic
      for (const slug of slugs) {
        ctx.routes.add(`/docs/${slug}`);
      }
    }
  }
})

See: Runtime Prerender Configuration

Summary:
Nuxt cannot automatically pre-render dynamic catch-all routes unless you provide the list of routes. You must manually or programmatically specify which routes to pre-render based on your content files Prerendering.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

can you create the actoal logic for fetching pages from my content source? @keen isle

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

Certainly! To programmatically fetch all slugs from your Nuxt Content collection and add them to the prerender routes, you can use the prerender:routes Nuxt hook. The knowledge sources show that you can use this hook to dynamically add routes before prerendering, but they do not provide a ready-made function for reading all slugs from the content directory. However, they do show the pattern for using the hook and suggest fetching slugs from your content source Runtime Prerender Configuration.

Here is the pattern from the documentation:

export default defineNuxtConfig({
  hooks: {
    async "prerender:routes"(ctx) {
      // Example: fetch slugs from your content source
      const slugs = ['page1', 'page2']; // Replace with actual logic
      for (const slug of slugs) {
        ctx.routes.add(`/docs/${slug}`);
      }
    },
  },
});

However, the knowledge sources do not provide a built-in Nuxt Content API for reading all slugs at build time in nuxt.config.ts. You would need to implement your own logic to read the files from the content/ directory and extract the slugs, but this is not covered in the provided documentation.

Summary:

• The knowledge sources show how to use the prerender:routes hook to add routes dynamically.
• They do not provide a ready-to-use function for extracting all slugs from the content directory at build time.
• You will need to implement the logic for reading your content files and extracting slugs yourself, as this is not detailed in the sources.

If you need to see how to use the hook, refer to the example above Runtime Prerender Configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle And how can I get the slugs I want to pre-render?

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

To get the slugs you want to pre-render, you need to collect all the paths (slugs) from your content collection. The knowledge sources show that you can use the queryCollection utility to fetch documents from a collection and access their path fields. However, this utility is designed to be used within your Nuxt app (pages, server API, etc.), not directly in nuxt.config.ts at build time.

For example, in a page or composable, you can fetch all document paths like this:

const { data: docs } = await useAsyncData('documents-list', () => {
  return queryCollection('docs')
    .select('path')
    .all()
})

This will give you an array of objects with their path fields, which you can use as slugs for prerendering Examples: queryCollection.

However, the knowledge sources do not provide a method to run this logic at build time inside nuxt.config.ts for the purpose of automatically generating the list of routes to pre-render. You would need to implement a custom script or use Node.js file system utilities to read the content directory and extract slugs, but this is not covered in the provided documentation.

In summary:

• You can get slugs (paths) using queryCollection within your app.
• There is no documented way in the sources to automatically extract all slugs for prerendering in nuxt.config.ts.
• You will need to manually maintain the list or implement your own logic outside of what is shown in the knowledge sources.

If you want to see how to fetch slugs in your app, refer to the example above Examples: queryCollection.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle And how to use it for pre-rendering?

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

To use your content slugs for pre-rendering in Nuxt, you need to provide the list of routes to the Nitro prerender configuration in your nuxt.config.ts. The knowledge sources show that you can do this by specifying the routes manually or by using the prerender:routes Nuxt hook to add them programmatically Runtime Prerender Configuration.

However, the knowledge sources do not provide a built-in way to automatically extract all slugs from your content collection at build time for use in nuxt.config.ts. They show the pattern for adding routes, but you must supply the list of slugs yourself.

Example using manual route list:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/docs/page1',
        '/docs/page2',
        // Add all your content slugs here
      ]
    }
  }
})

Prerendering

Example using the prerender:routes hook:

export default defineNuxtConfig({
  hooks: {
    async 'prerender:routes'(ctx) {
      // Replace with your logic to get slugs
      const slugs = ['page1', 'page2'];
      for (const slug of slugs) {
        ctx.routes.add(`/docs/${slug}`);
      }
    }
  }
})

Runtime Prerender Configuration

Summary:

• You must provide the list of slugs (routes) to pre-render, either manually or programmatically.
• The knowledge sources do not show a built-in way to extract slugs from the content directory at build time for this purpose.
• Once you have the list, add it to the Nitro prerender config or use the prerender:routes hook as shown above.

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle How can I use automatic content retrieval from nuxt content in prerender?

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

I'm sorry, but the knowledge sources do not provide a built-in or documented way to automatically retrieve all slugs from Nuxt Content at build time for use in the prerender configuration. While you can use utilities like queryCollection within your app to fetch content slugs, there is no example or API in the sources that demonstrates how to integrate this automatic retrieval directly into the nuxt.config.ts or the prerendering process.

The recommended approaches in the documentation are to either:

• Manually specify the routes you want to pre-render in the nitro.prerender.routes array, or
• Use the prerender:routes Nuxt hook and provide your own logic to add routes, but the sources only show placeholder logic for fetching slugs, not an actual implementation that reads from Nuxt Content at build time Runtime Prerender Configuration.

Therefore, based on the provided knowledge sources, there is no officially documented method for automatic content retrieval from Nuxt Content for prerendering. You will need to maintain the list of routes manually or implement your own custom solution outside of what is shown in the documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle But in the previous version of Nuxt Content, this happened automatically. Why doesn't it automatically re-render all content documents anymore?

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

You're correct that in previous versions of Nuxt Content (v2), content documents were often automatically discovered and pre-rendered. However, with Nuxt Content v3, there have been significant architectural changes. The knowledge sources explain that document-driven mode has been dropped: Markdown files will not convert to Nuxt pages automatically, and you now need to create pages explicitly and manage routing yourself. This means Nuxt no longer automatically knows which dynamic routes (like those handled by [...slug].vue) exist based on your content files Migration Changes.

As a result, for static site generation, you must now explicitly specify which routes to pre-render, either by linking to them from other pages (so the crawler can find them) or by manually listing them in your configuration. This change is part of the move to a more flexible, SQL-backed content system and a clearer separation between content and routing logic in Nuxt Content v3.

“Document driven mode is dropped: Markdown files will not convert to Nuxt pages automatically, you need to create pages, check this section to see how.”
— Migration Changes

This is why automatic pre-rendering of all content documents no longer happens by default in Nuxt Content v3.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[round tartan]

@keen isle What do you recommend?

[keen isle]

Let me check the knowledge base for you again. One moment! :books:

---

Given the changes in Nuxt Content v3, the recommended approach is to explicitly specify which routes should be pre-rendered. Since automatic document-driven pre-rendering is no longer supported, you should:

1. Manually List Routes:
   Add all the content routes you want to pre-render in your nuxt.config.ts under nitro.prerender.routes. This ensures that all your important content pages are generated as static files.

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: [
           '/docs/page1',
           '/docs/page2',
           // Add all your content slugs here
         ]
       }
     }
   })
   

   Prerendering

2. Use the prerender:routes Hook:
   If you have a way to programmatically determine your slugs (for example, from an external source or a custom script), you can use the prerender:routes hook to add them dynamically:

   export default defineNuxtConfig({
     hooks: {
       async 'prerender:routes'(ctx) {
         const slugs = ['page1', 'page2']; // Replace with your logic
         for (const slug of slugs) {
           ctx.routes.add(`/docs/${slug}`);
         }
       }
     }
   })
   

   Runtime Prerender Configuration

3. Ensure Links Exist:
   Make sure all your content pages are linked from other pages in your app. Nuxt’s crawler will only pre-render pages it can discover by following links from the root or other pre-rendered pages.

The knowledge sources do not provide a built-in way to automatically extract all slugs from your content directory at build time for use in prerendering. Therefore, you must either maintain the list manually or implement your own logic to generate it.

This approach is necessary due to the architectural changes in Nuxt Content v3, where document-driven mode is no longer available and content files do not automatically become routes Migration Changes.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@round tartan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[digital rock]

@round tartan were you able to resolve this?

I'm using the default server side rendering but on page load, my blog content does not load unless I navigate away and back.

I reported it here: https://discord.com/channels/473401852243869706/1398105008309801020

[round tartan]

I solved it by manually specifying routes to prerender

[digital rock]

can you share the part of the code you did this please?

[round tartan]

Add this to nuxt.config.ts:

  prerender: {
    routes: [
      '/wiki/general/introduction',
      '/wiki/usage/prerequisites',
      '/wiki/recipes/breakfast',
    ]
  }
}```

with your own routes

[clever scaffold]

You can probably automate it with a module

So if you define a custom module in modules, you might be able to read the files in some dir and inject them into the nitro config

[digital rock]

there are routes that were having the issues? In my case it's the /home page and /blog page, the blog does not display on the initial page load on either of the page except you navigate away and come back

[round tartan]

what do you mean by does not display?