Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| '/modules': { prerender: true }, | ||
| '/modules/**': { prerender: true }, |
There was a problem hiding this comment.
The configuration attempts to prerender /modules/** routes, but the prerender ignore list still blocks these routes from being discovered by the crawler, which likely means they won't actually be prerendered at build time.
View Details
📝 Patch Details
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 24330e60..f6fb1cef 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -277,6 +277,23 @@ export default defineNuxtConfig({
compatibilityDate: '2025-07-14',
nitro: {
hooks: {
+ async 'prerender:routes'(routes) {
+ try {
+ // Fetch all modules from CDN to generate prerender routes
+ const modules = await fetch('https://unpkg.com/@nuxt/modules@latest/modules.json')
+ .then(r => r.json())
+ .catch(() => [])
+
+ // Add routes for each module
+ if (Array.isArray(modules)) {
+ for (const module of modules) {
+ routes.add(`/modules/${module.name}`)
+ }
+ }
+ } catch (error) {
+ console.warn('Failed to fetch modules for prerendering:', error)
+ }
+ },
'prerender:route': (route) => {
if (route.error) {
console.error('route.error', route.route, route.error)
Analysis
Configuration conflict prevents /modules dynamic routes from being prerendered
What fails: Routes like /modules/vue-i18n, /modules/nuxt-auth-utils defined by dynamic route /modules/[slug].vue are not prerendered despite being configured with prerender: true in routeRules
How to reproduce:
- Build the project with
npm run build - Check the generated .output directory for prerendered routes
- Verify that
/modules/index.htmlexists but/modules/[actual-module-name]/index.htmldoes not exist - The
routeRulesdefines/modules/**withprerender: true(line 122) - But
nitro.prerender.ignoreincludesroute => route.startsWith('/modules/')(line 293)
Result: Only /modules/index.html is prerendered (static route). Individual module pages matching /modules/[slug] are NOT prerendered because:
- Dynamic routes with wildcards (
/modules/**) inrouteRulesdon't automatically discover and prerender all matching routes - Routes are only prerendered if they are explicitly listed or discovered by the crawler
- The ignore list
route.startsWith('/modules/')prevents the crawler from prerendering any route starting with/modules/ - Therefore the
prerender: truerule on/modules/**becomes ineffective
Expected behavior: According to Nuxt prerendering documentation, when prerender: true is set on a route pattern, those routes should be prerendered. For dynamic routes like /modules/[slug], this requires either explicit route listing or crawler discovery.
Fix applied: Added nitro.hooks['prerender:routes'] hook that fetches all modules from https://unpkg.com/@nuxt/modules@latest/modules.json and explicitly adds each /modules/{name} route to the prerender list. This ensures all module pages are prerendered during build time.
| :class="[ | ||
| isLoading ? 'animate-pulse' : (appear ? heroBackgroundClass : 'opacity-0'), | ||
| appeared ? 'duration-[400ms]' : 'duration-1000' | ||
| appeared ? 'duration-400' : 'duration-1000' |
There was a problem hiding this comment.
| appeared ? 'duration-400' : 'duration-1000' | |
| appeared ? 'duration-[400ms]' : 'duration-1000' |
Invalid Tailwind duration class - duration-400 doesn't exist in standard Tailwind CSS. The original duration-[400ms] was a custom arbitrary value that should be preserved.
View Details
Analysis
Invalid Tailwind duration class in HeroBackground transition
What fails: HeroBackground component in app/layouts/default.vue uses duration-400 class which doesn't exist in Tailwind CSS. The component's transition duration will not be applied, falling back to browser default instead of the intended 400ms.
How to reproduce:
# Examine the compiled CSS or inspect element during page transition
# The class 'duration-400' will not generate any CSS rule
# Expected: <transition-duration: 400ms>
# Actual: No transition-duration property appliedResult: According to Tailwind CSS transition-duration documentation, the valid duration classes are: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000, and duration-0. There is no duration-400 class.
Expected: The class should be duration-[400ms] (arbitrary value syntax) to specify a custom 400ms transition duration, which was the original correct value before commit 03902b1.
Reference: Tailwind CSS Arbitrary Values
wip