nuxt4-patterns
Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
Best for Nuxt 4 developersWorks with GitHubLow risk
⌘source
- author
@affaan-m- language
- JavaScript
★159kstars
25kforks
Apr 17, 2026
✦overview.md
Key Features
- ·Prevent hydration mismatches between server and client
- ·Optimize route-level rendering with prerender, SWR, or ISR
- ·Improve performance through lazy loading and payload management
- ·Implement SSR-safe data fetching with useFetch and useAsyncData
- ·Handle Nuxt routing issues and middleware correctly
- ·Use browser-only logic safely with onMounted() or ClientOnly
Use Cases
- →Debugging hydration errors in Nuxt 4 SSR applications
- →Optimizing rendering performance for specific routes or components
- →Implementing proper data fetching patterns in pages with SSR
- →Resolving routing issues related to SSR/client differences
- →Building hybrid rendering applications with route rules
Best for
- ✓Nuxt 4 developers
- ✓SSR/hybrid rendering projects
- ✓Performance optimization work
Not ideal for
- !Non-Nuxt projects
- !Static site generation only
- !Simple client-side Vue apps
FAQs
name
nuxt4-patterns
description
Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
origin:ECC
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.vuecomponent when the server cannot produce the same markup. - Use Nuxt's
useRoute()composable, not the one fromvue-router. - Do not use
route.fullPathto drive SSR-rendered markup. URL fragments are client-only, which can create hydration mismatches. - Treat
ssr: falseas an escape hatch for truly browser-only areas, not a default fix for mismatches.
Data Fetching
$install
1-click copynpx skills add affaan-m/everything-claude-code --skill nuxt4-patternsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.