skills.rest
freedom909
freedom909COMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

Implements Nuxt 4 patterns for hydration safety, route rules, lazy loading, and SSR-safe data fetching.

Updated Mar 18, 2026
Search Tags:#vue#lazy loading#ssr#Nuxt#hydration#useFetch#route rules
One-click install
npx skills add https://github.com/freedom909/real-estate-saas --skill nuxt4-patterns-freedom909
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/freedom909/real-estate-saas/tree/main/.trae/skills/nuxt4-patterns
Command: npx skills add https://github.com/freedom909/real-estate-saas --skill nuxt4-patterns-freedom909

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Nuxt 4 applications often suffer from hydration mismatches, inefficient data fetching, and poorly chosen rendering strategies. This Skill provides concrete patterns to diagnose and fix these issues when building SSR or hybrid-rendered Nuxt apps. ## Core Features & Use Cases - Hydration Safety: Guidance for keeping the first render deterministic by moving browser-only logic behind onMounted, import.meta.client, ClientOnly, or .client.vue components. - SSR-Safe Data Fetching: Rules for choosing between useFetch, useAsyncData, $fetch, and lazy variants, including stable keys, payload trimming with pick, and pending-state handling. - Route Rules & Performance: Configuration patterns for prerender, SWR, ISR, and client-only routes in nuxt.config.ts, plus lazy component loading and lazy hydration strategies. - Use Case: When a product page shows a hydration mismatch warning and loads slowly, apply this Skill to move browser-only code out of SSR markup, switch page data to useFetch, and add swr route rules for the catalog. ## Quick Start Review my Nuxt 4 page for hydration mismatches and rewrite its data fetching to use SSR-safe useFetch or useAsyncData patterns.

Frequently Asked Questions about nuxt4-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix hydration mismatch errors in Nuxt 4?▼

Hydration mismatches in Nuxt 4 happen when server-rendered markup differs from the client's first render. Move Date.now(), Math.random(), and browser-only APIs behind onMounted, import.meta.client, ClientOnly, or a .client.vue component, and avoid using route.fullPath in SSR-rendered markup.

When should I use useFetch vs useAsyncData in Nuxt?▼

Use useFetch for straightforward SSR-safe API reads, since it forwards server-fetched data into the Nuxt payload. Use useAsyncData when the fetcher is not a simple $fetch call, when you need a custom cache key, or when composing multiple async sources.

How do I configure route rules in nuxt.config.ts?▼

Define routeRules in nuxt.config.ts with per-route strategies: prerender for static pages, swr for cached content with background revalidation, isr for incremental regeneration, ssr false for client-only routes, and cache for Nitro-level API responses.

Does Nuxt 4 support lazy hydration of components?▼

Yes, Nuxt 4 supports lazy hydration for single-file components using the Lazy prefix with directives like hydrate-on-visible, or defineLazyHydrationComponent for custom visibility or idle strategies. Passing new props to a lazily hydrated component triggers hydration immediately.

When should I use $fetch instead of useFetch?▼

Use $fetch for user-triggered writes or client-only actions, not for top-level page data that should be hydrated from SSR. Page data fetched with plain $fetch will not be serialized into the Nuxt payload, causing a duplicate request on hydration.

Related Skills

Explore More Software Engineering Skills→
akornmeierakornmeier
4

nuxt-ui

Implement and customize NuxtUI v4.1+ components in Nuxt 4 projects.

Community
Intermediate
MaelwalserMaelwalser

nuxt4-patterns

Resolve Nuxt 4 hydration mismatches and SSR/client markup divergence.

Community
Intermediate
rodrigotoledorodrigotoledo

perf-web-optimization

Optimize web performance by reducing bundle size, images, caching, and lazy loading.

Community
Intermediate
lawalletiolawalletio
3

vite

Configure Vite projects with plugin API usage and SSR setup.

Official
Advanced