N
Nuxt•3mo ago
Thomas

Prerendering dynamic routes

I have a Nuxt app with some routes: index.vue, contact.vue, and [slug].vue. When I use the following route rules, it only generates the static ones. Could you explain why? 
routeRules: {
 '/**': { prerender: true }
}
routeRules: {
 '/**': { prerender: true }
}
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Thomas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When you use the following route rules in your Nuxt config: 
routeRules: {
  '/**': { prerender: true }
}
routeRules: {
  '/**': { prerender: true }
}
Nuxt will mark all routes for prerendering, but it can only prerender routes that it knows about at build time. For static routes like / (from index.vue) and /contact (from contact.vue), Nuxt can discover and prerender them automatically. However, for dynamic routes like [slug].vue (e.g., /blog/my-post), Nuxt does not know which slugs exist unless you explicitly provide them. The wildcard in routeRules ('/**') tells Nuxt to prerender any route it knows about, but it does not generate a list of possible dynamic paths by itself. As a result, only the static routes are prerendered. To prerender dynamic routes, you need to provide the specific paths you want to generate. You can do this by: - Adding the dynamic routes to nitro.prerender.routes in your nuxt.config.ts: 
  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ['/post/first-slug', '/post/second-slug'],
      },
    },
  })
  
  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ['/post/first-slug', '/post/second-slug'],
      },
    },
  })
- Or, by using the prerender:routes Nuxt hook to programmatically add routes before prerendering: 
  export default defineNuxtConfig({
    hooks: {
      async 'prerender:routes'(ctx) {
        // Fetch your slugs from a CMS or data source
        const slugs = ['first-slug', 'second-slug']
        for (const slug of slugs) {
          ctx.routes.add(`/post/${slug}`)
        }
      },
    },
  })
  
  export default defineNuxtConfig({
    hooks: {
      async 'prerender:routes'(ctx) {
        // Fetch your slugs from a CMS or data source
        const slugs = ['first-slug', 'second-slug']
        for (const slug of slugs) {
          ctx.routes.add(`/post/${slug}`)
        }
      },
    },
  })
This behavior is confirmed in the Nuxt documentation and recent pull requests, which clarify that while route rules with wildcards will mark routes for prerendering, Nuxt still needs to know the actual paths to generate, especially for dynamic routes. If you only specify a wildcard, Nuxt cannot guess the possible values for [slug] and will skip those unless you provide them explicitly fix(nuxt): use routeRules to hint pages to prerender Prerendering - Nuxt Docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1369008538453807337> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?