Conversation
|
📝 WalkthroughWalkthroughThree documentation files were updated to reflect a new addition to the skill catalog. The skill count across metadata and README references was incremented from 114 to 115. A new documentation file defining "Nuxt 4 Patterns" was added, covering SSR safety, data fetching, route rules, and lazy loading best practices. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Analysis CompleteGenerated ECC bundle from 500 commits | Confidence: 100% View Pull Request #703Repository Profile
Detected Workflows (9)
Generated Instincts (17)
After merging, import with: Files
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@skills/nuxt4-patterns/SKILL.md`:
- Around line 11-100: The SKILL.md file uses nonstandard headings; rename and
reorganize the content to match the repo skill template by adding three explicit
top-level sections titled "When to Use", "How It Works", and "Examples" (replace
"When to Activate" with "When to Use"; move the "Hydration Safety", "Data
Fetching", "Route Rules", and "Lazy Loading and Performance" subsections under a
single "How It Works" section; keep the code snippets and usage patterns under
"Examples" and include the Review Checklist there or under "How It Works" as
appropriate). Keep all existing content and code blocks intact, only
retitle/restructure headings in SKILL.md so the document follows the required
template.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 46a25223-411c-4893-a33f-021947ae2e68
📒 Files selected for processing (3)
AGENTS.mdREADME.mdskills/nuxt4-patterns/SKILL.md
| ## When to Activate | ||
|
|
||
| - Hydration mismatches between server HTML and client state | ||
| - Route-level rendering decisions such as prerender, SWR, ISR, or client-only sections | ||
| - Performance work around lazy loading, lazy hydration, or payload size | ||
| - Page or component data fetching with `useFetch`, `useAsyncData`, or `$fetch` | ||
| - Nuxt routing issues tied to route params, middleware, or SSR/client differences | ||
|
|
||
| ## Hydration Safety | ||
|
|
||
| - Keep the first render deterministic. Do not put `Date.now()`, `Math.random()`, browser-only APIs, or storage reads directly into SSR-rendered template state. | ||
| - Move browser-only logic behind `onMounted()`, `import.meta.client`, `ClientOnly`, or a `.client.vue` component when the server cannot produce the same markup. | ||
| - Use Nuxt's `useRoute()` composable, not the one from `vue-router`. | ||
| - Do not use `route.fullPath` to drive SSR-rendered markup. URL fragments are client-only, which can create hydration mismatches. | ||
| - Treat `ssr: false` as an escape hatch for truly browser-only areas, not a default fix for mismatches. | ||
|
|
||
| ## Data Fetching | ||
|
|
||
| - Prefer `await useFetch()` for SSR-safe API reads in pages and components. It forwards server-fetched data into the Nuxt payload and avoids a second fetch on hydration. | ||
| - Use `useAsyncData()` when the fetcher is not a simple `$fetch()` call, when you need a custom key, or when you are composing multiple async sources. | ||
| - Give `useAsyncData()` a stable key for cache reuse and predictable refresh behavior. | ||
| - Keep `useAsyncData()` handlers side-effect free. They can run during SSR and hydration. | ||
| - Use `$fetch()` for user-triggered writes or client-only actions, not top-level page data that should be hydrated from SSR. | ||
| - Use `lazy: true`, `useLazyFetch()`, or `useLazyAsyncData()` for non-critical data that should not block navigation. Handle `status === 'pending'` in the UI. | ||
| - Use `server: false` only for data that is not needed for SEO or the first paint. | ||
| - Trim payload size with `pick` and prefer shallower payloads when deep reactivity is unnecessary. | ||
|
|
||
| ```ts | ||
| const route = useRoute() | ||
|
|
||
| const { data: article, status, error, refresh } = await useAsyncData( | ||
| () => `article:${route.params.slug}`, | ||
| () => $fetch(`/api/articles/${route.params.slug}`), | ||
| ) | ||
|
|
||
| const { data: comments } = await useFetch(`/api/articles/${route.params.slug}/comments`, { | ||
| lazy: true, | ||
| server: false, | ||
| }) | ||
| ``` | ||
|
|
||
| ## Route Rules | ||
|
|
||
| Prefer `routeRules` in `nuxt.config.ts` for rendering and caching strategy: | ||
|
|
||
| ```ts | ||
| export default defineNuxtConfig({ | ||
| routeRules: { | ||
| '/': { prerender: true }, | ||
| '/products/**': { swr: 3600 }, | ||
| '/blog/**': { isr: true }, | ||
| '/admin/**': { ssr: false }, | ||
| '/api/**': { cache: { maxAge: 60 * 60 } }, | ||
| }, | ||
| }) | ||
| ``` | ||
|
|
||
| - `prerender`: static HTML at build time | ||
| - `swr`: serve cached content and revalidate in the background | ||
| - `isr`: incremental static regeneration on supported platforms | ||
| - `ssr: false`: client-rendered route | ||
| - `cache` or `redirect`: Nitro-level response behavior | ||
|
|
||
| Pick route rules per route group, not globally. Marketing pages, catalogs, dashboards, and APIs usually need different strategies. | ||
|
|
||
| ## Lazy Loading and Performance | ||
|
|
||
| - Nuxt already code-splits pages by route. Keep route boundaries meaningful before micro-optimizing component splits. | ||
| - Use the `Lazy` prefix to dynamically import non-critical components. | ||
| - Conditionally render lazy components with `v-if` so the chunk is not loaded until the UI actually needs it. | ||
| - Use lazy hydration for below-the-fold or non-critical interactive UI. | ||
|
|
||
| ```vue | ||
| <template> | ||
| <LazyRecommendations v-if="showRecommendations" /> | ||
| <LazyProductGallery hydrate-on-visible /> | ||
| </template> | ||
| ``` | ||
|
|
||
| - For custom strategies, use `defineLazyHydrationComponent()` with a visibility or idle strategy. | ||
| - Nuxt lazy hydration works on single-file components. Passing new props to a lazily hydrated component will trigger hydration immediately. | ||
| - Use `NuxtLink` for internal navigation so Nuxt can prefetch route components and generated payloads. | ||
|
|
||
| ## Review Checklist | ||
|
|
||
| - First SSR render and hydrated client render produce the same markup | ||
| - Page data uses `useFetch` or `useAsyncData`, not top-level `$fetch` | ||
| - Non-critical data is lazy and has explicit loading UI | ||
| - Route rules match the page's SEO and freshness requirements | ||
| - Heavy interactive islands are lazy-loaded or lazily hydrated |
There was a problem hiding this comment.
Align required skill section headings with repo standard.
Please add explicit sections named When to Use, How It Works, and Examples (you can keep the current content and reorganize/retitle headings). Right now the document uses custom headings (When to Activate, Hydration Safety, etc.), which misses the required skill template structure.
As per coding guidelines, skills/**/*.md: Skills should be formatted as Markdown with clear sections for When to Use, How It Works, and Examples.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@skills/nuxt4-patterns/SKILL.md` around lines 11 - 100, The SKILL.md file uses
nonstandard headings; rename and reorganize the content to match the repo skill
template by adding three explicit top-level sections titled "When to Use", "How
It Works", and "Examples" (replace "When to Activate" with "When to Use"; move
the "Hydration Safety", "Data Fetching", "Route Rules", and "Lazy Loading and
Performance" subsections under a single "How It Works" section; keep the code
snippets and usage patterns under "Examples" and include the Review Checklist
there or under "How It Works" as appropriate). Keep all existing content and
code blocks intact, only retitle/restructure headings in SKILL.md so the
document follows the required template.
Greptile SummaryThis PR adds a new
Confidence Score: 3/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant NuxtServer
participant API
Note over Browser,API: SSR Data Fetching (useFetch / useAsyncData)
Browser->>NuxtServer: Initial page request
NuxtServer->>API: $fetch('/api/articles/:slug')
API-->>NuxtServer: Article data
NuxtServer->>API: $fetch('/api/articles/:slug/comments') [skipped if server:false]
API-->>NuxtServer: Comments (optional)
NuxtServer-->>Browser: HTML + serialised Nuxt payload
Note over Browser,API: Hydration (no duplicate fetch)
Browser->>Browser: Restore state from payload
Browser->>Browser: Hydrate Vue components
Note over Browser,API: Client-side lazy data (lazy:true / server:false)
Browser->>API: $fetch('/api/articles/:slug/comments')
API-->>Browser: Comments
Browser->>Browser: Update UI (status: pending → success)
Last reviewed commit: "feat: add nuxt 4 pat..." |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const { data: article, status, error, refresh } = await useAsyncData( | ||
| () => `article:${route.params.slug}`, | ||
| () => $fetch(`/api/articles/${route.params.slug}`), | ||
| ) |
There was a problem hiding this comment.
useAsyncData key must be a string, not a function
The first argument to useAsyncData is typed as string in Nuxt 4 — passing an arrow function () => \article:${...}`in its place is a TypeScript type error and will not be treated as a reactive/computed key at runtime. The text immediately above this block correctly states "GiveuseAsyncData()` a stable key for cache reuse," but the example contradicts that guidance by wrapping the key in a function.
| const { data: article, status, error, refresh } = await useAsyncData( | |
| () => `article:${route.params.slug}`, | |
| () => $fetch(`/api/articles/${route.params.slug}`), | |
| ) | |
| const { data: article, status, error, refresh } = await useAsyncData( | |
| `article:${route.params.slug}`, | |
| () => $fetch(`/api/articles/${route.params.slug}`), | |
| ) |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f2cdcb77b7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| ``` | ||
|
|
||
| ✨ **That's it!** You now have access to 27 agents, 114 skills, and 59 commands. | ||
| ✨ **That's it!** You now have access to 27 agents, 115 skills, and 59 commands. |
There was a problem hiding this comment.
nuxt4-patterns to the install manifests
Users who follow the manual/selective install flow shown just above (./install.sh typescript or --with lang:typescript) still will not receive this new skill. The installer resolves those selections through the framework-language module (scripts/lib/install-manifests.js / manifests/install-components.json), and that module’s paths in manifests/install-modules.json does not include skills/nuxt4-patterns or expose a skill:nuxt4-patterns/framework:nuxt component. After this change, the README advertises 115 skills, but a common install path continues to ship only 114.
Useful? React with 👍 / 👎.
2 participants
Summary
nuxt4-patternsskill covering hydration safety, route rules, lazy loading, and SSR-safe data fetchingTesting
node tests/ci/validators.test.jsnode tests/run-all.js(progresses through validators, hooks, and lib tests, then stalls locally intests/scripts/claw.test.jsbecause this machine has a realclaudebinary on PATH at/Users/affoon/.local/bin/claude)Summary by cubic
Adds a new
nuxt4-patternsskill to guide Nuxt 4 apps on hydration safety, route rules, lazy loading, and SSR-safe data fetching. Updates docs to reflect 115 total skills.skills/nuxt4-patterns/SKILL.mdwith patterns for hydration safety,useFetch/useAsyncData, route rules, and lazy hydration/loading.README.mdandAGENTS.mdto show 115 skills.Written for commit f2cdcb7. Summary will update on new commits.
Summary by CodeRabbit