Nuxt4 Patterns

A focused guide for keeping Nuxt 4 server and client rendering in sync. Covers the classic hydration footguns like Date.now() in templates, using the wrong route composable, and treating ssr: false as a first resort. The data fetching section is practical: when to pick useFetch over useAsyncData, how to handle lazy loads without breaking SEO, and why your async handlers need stable keys. Route rules get a clean explainer on prerender versus swr versus isr. The lazy loading advice is refreshingly pragmatic: Nuxt already code splits by route, so don't chase component splits until you need them. Use this when hydration errors are eating your day or you're setting up rendering strategy for a new app.

skills.sh installs: 5.5K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill nuxt4-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Nuxt 4 Patterns

Use when building or debugging Nuxt 4 apps with SSR, hybrid rendering, route rules, or page-level data fetching.

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.