<NuxtPage /> not rendering dynamic pages in production (Vercel)
I'm working on a Nuxt 3 project (nuxt@3.17.4) deployed to Vercel. Everything works perfectly in local development: pages render correctly via , data loads, and routing behaves as expected.
However, in production, only the layout (header, footer) is visible, and seems to render nothing, as if no matching page is being resolved.
What I've tried:
Ensured the store contains valid data via logs.
Wrapped the carousel component in to avoid SSR hydration issues.
Cleaned and rebuilt with Node 20 (nvm use 20), as Vercel was previously using nodejs23.x.
Verified that all dynamic routes exist and work in development.
Any guidance would be greatly appreciated π
i join pictures of my dev render, and prod.
6 Replies
Hi @Cogal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry you're experiencing this issue with dynamic pages not rendering in production on Vercel. Based on the knowledge sources provided, here are some possible causes and troubleshooting steps:
1. Dynamic Route Generation and Prerendering
In Nuxt 3, dynamic routes may not be automatically detected and generated in production, especially when deploying to static hosts or using SSG/prerendering. You need to explicitly specify dynamic routes in your configuration. The recommended way is to use the
You mentioned switching to Node 20, which is good. Ensure that your Vercel project is indeed using Node 20.x, as mismatched Node versions can cause unexpected issues, especially with Nuxt 3 and its dependencies. Double-check your Vercel settings. 3. SSR/SPA Mode
If your app is running in SPA mode in production (either by misconfiguration or due to a build/deploy issue), dynamic routes may not be resolved as expected. Make sure SSR is enabled unless you specifically want SPA behavior. 4. File-based Routing and Directory Structure
Ensure your dynamic route files are correctly named (e.g.,
There are no explicit references to Vercel-specific dynamic route issues in the knowledge sources, but ensure your deployment output is set to "Serverless" or "Edge" as appropriate for your Nuxt 3 app, and that your build completes without errors. 6. Debugging in Production
The knowledge sources do not provide a direct way to debug hydration or routing issues in production, but you can add logging or use Vercel's serverless function logs to help diagnose if routes are being hit as expected. If after these checks the issue persists, please ensure that your dynamic routes are included in the
- Nuxt configuration: generate and prerendering - Dynamic route generation and sitemap issues ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
In Nuxt 3, dynamic routes may not be automatically detected and generated in production, especially when deploying to static hosts or using SSG/prerendering. You need to explicitly specify dynamic routes in your configuration. The recommended way is to use the
nitro.prerender.routes option in your nuxt.config.ts to ensure all dynamic pages are generated and available in production. For example:
If you rely on crawling, make sure your links are discoverable and that crawlLinks: true is set. However, for dynamic data (e.g., fetched from an API), you often need to provide the routes explicitly. See more details in the Nuxt configuration docs.
2. Vercel Node VersionYou mentioned switching to Node 20, which is good. Ensure that your Vercel project is indeed using Node 20.x, as mismatched Node versions can cause unexpected issues, especially with Nuxt 3 and its dependencies. Double-check your Vercel settings. 3. SSR/SPA Mode
If your app is running in SPA mode in production (either by misconfiguration or due to a build/deploy issue), dynamic routes may not be resolved as expected. Make sure SSR is enabled unless you specifically want SPA behavior. 4. File-based Routing and Directory Structure
Ensure your dynamic route files are correctly named (e.g.,
/pages/[slug].vue) and that there are no typos or casing issues, as these can sometimes be overlooked in local development (especially on case-insensitive file systems) but cause problems in production.
5. Vercel-Specific IssuesThere are no explicit references to Vercel-specific dynamic route issues in the knowledge sources, but ensure your deployment output is set to "Serverless" or "Edge" as appropriate for your Nuxt 3 app, and that your build completes without errors. 6. Debugging in Production
The knowledge sources do not provide a direct way to debug hydration or routing issues in production, but you can add logging or use Vercel's serverless function logs to help diagnose if routes are being hit as expected. If after these checks the issue persists, please ensure that your dynamic routes are included in the
nitro.prerender.routes array, as this is a common cause for dynamic pages not rendering in production, especially on static hosts or when using SSG. If you are fetching data for dynamic routes, you may also need to generate the list of routes programmatically.
Unfortunately, the knowledge sources do not provide a more specific solution for your exact scenario, but the above steps are the most relevant based on the available information. If you can share your nuxt.config.ts and the structure of your /pages directory, it may help further diagnose the issue.
References:- Nuxt configuration: generate and prerendering - Dynamic route generation and sitemap issues ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@269964207363981313> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ok, i tested that, but the middleware block some route, if you have an idea ?
@kapa.ai
Let me check the knowledge base for you again. One moment! :books:
Sorry @Cogal, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
after 1 weeks of search..
Pages != pages