nuxt4-patterns
Nuxt 4 app patterns for hydration safety, performance, route rules
by affaan-mFree
Description
nuxt4-patterns is an agent skill from the ECC collection by affaan-m, listed on skills.sh. It sets out patterns for Nuxt 4 apps that use server-side rendering, hybrid rendering, route rules and page-level data fetching. Its central topic is hydration safety: keeping the first render deterministic, moving browser-only logic behind onMounted, import.meta.client, ClientOnly or a .client.vue component, using Nuxt's own useRoute composable, and not driving server-rendered markup from route.fullPath because URL fragments exist only on the client. It treats ssr: false as an escape hatch for truly browser-only areas rather than a fix for mismatches. Other topics are route-level rendering choices such as prerender, SWR, ISR and client-only sections, performance through lazy loading, lazy hydration and payload size, and data fetching with useFetch, useAsyncData and $fetch. The skill applies when building or debugging a Nuxt 4 app. A skill is a SKILL.md file of instructions that an AI agent loads when a task calls for it. It is free and open source, and the skills.sh listing shows all three security audits passing.…
Highlights
- Hydration safety rules
- Route rules, prerender, SWR and ISR
- Lazy loading and payload size
- SSR-safe useFetch and useAsyncData
Ratings & Reviews
No ratings yet
Be the first to rate nuxt4-patterns.
People also visit
gsap-frameworks
GSAP animation setup for Vue, Svelte, Nuxt, and other component frameworks
webapp-testing
Test local web applications using Playwright for UI verification and debugging
content-research-writer
Assists in writing high-quality content by conducting research
nuxt4-patterns FAQ
What does the nuxt4-patterns skill do?
It guides an agent in building and debugging Nuxt 4 apps, with a focus on SSR hydration safety, route rendering and data fetching.
What causes hydration mismatches here?
Non-deterministic first renders, such as Date.now or Math.random, browser-only APIs in SSR markup, and route.fullPath used for server-rendered output.
Should I just turn off SSR?
No. The skill treats ssr: false as an escape hatch for browser-only areas, not a default fix.
How do I install it?
Run: npx skills add https://github.com/affaan-m/ecc --skill nuxt4-patterns
Is it free?
Yes. It is free and open source.
Are there security findings?
The skills.sh listing shows Gen Agent Trust Hub, Socket and Snyk all passing.
What are the best nuxt4-patterns alternatives?
Popular alternatives to nuxt4-patterns include vue-patterns, ui-to-vue and gsap-frameworks. See all nuxt4-patterns alternatives