Nuxt4 Patterns

This one's for when you're fighting hydration mismatches or trying to squeeze performance out of a Nuxt 4 app. It covers the sharp edges: keeping server and client renders identical, picking the right data fetcher (useFetch vs useAsyncData vs $fetch), setting route rules for prerender/SWR/ISR per page group, and lazy loading components that don't need to block paint. The hydration guidance is especially practical, like avoiding Date.now() in SSR templates and not using route.fullPath for server-rendered markup. If you're doing anything beyond a basic SSR setup or you've seen "Hydration mismatch" errors, you'll want this loaded.

skills.sh installs: 4.4K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --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.