skills.rest
Femad-6
Femad-6COMMUNITY
Explore all skills by this author →
WebsiteGitHub

nuxt4-patterns

Guides Nuxt 4 development with hydration-safe SSR, route rules, and lazy loading patterns.

Updated Mar 25, 2026
Search Tags:#vue#lazy loading#ssr#hydration#nuxt#usefetch#route rules
One-click install
npx skills add https://github.com/Femad-6/my-skills --skill nuxt4-patterns-femad-6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/Femad-6/my-skills/tree/main/.github/skills/nuxt4-patterns
Command: npx skills add https://github.com/Femad-6/my-skills --skill nuxt4-patterns-femad-6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Nuxt 4 apps frequently suffer from hydration mismatches, inefficient data fetching, and poorly chosen rendering strategies. This Skill provides concrete patterns for SSR-safe code, route-level rendering rules, and performance-oriented lazy loading. ## Core Features & Use Cases - Hydration Safety: Rules for keeping server-rendered markup deterministic, using onMounted, import.meta.client, ClientOnly, and .client.vue components for browser-only logic. - SSR-Safe Data Fetching: Guidance on useFetch, useAsyncData, $fetch, lazy variants, stable keys, and payload trimming with pick. - Route Rules & Performance: routeRules configuration for prerender, SWR, ISR, and client-only routes, plus lazy component loading and lazy hydration strategies. - Use Case: When a Nuxt page shows hydration mismatch warnings or fetches data twice on load, apply these patterns to move data into useFetch and isolate client-only logic. ## Quick Start Ask the assistant to review your Nuxt 4 page for hydration mismatches and SSR-safe data fetching using the nuxt4-patterns skill.

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?▼

Keep the first render deterministic by removing Date.now(), Math.random(), and browser-only APIs from SSR-rendered state. Move client-only logic behind onMounted, import.meta.client, ClientOnly, or a .client.vue component so server and client markup match.

When should I use useFetch vs useAsyncData in Nuxt?▼

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

How do I configure route rules in Nuxt 4?▼

Define routeRules in nuxt.config.ts with per-path strategies like prerender for static pages, swr for cached revalidation, isr for incremental regeneration, and ssr: false for client-only sections. Choose rules per route group rather than globally.

Why does my Nuxt page fetch data twice on load?▼

Double fetching happens when top-level data uses $fetch instead of useFetch or useAsyncData, so the server-fetched result is not serialized into the payload. Switching to useFetch lets hydration reuse the server response without a second request.

Does Nuxt 4 support lazy hydration of components?▼

Yes, Nuxt supports lazy hydration via the Lazy prefix, hydrate-on-visible, and defineLazyHydrationComponent with visibility or idle strategies. It works on single-file components, and passing new props triggers immediate hydration.

Related Skills

Explore More Software Engineering Skills→
GuibibiGuibibi

nuxt

Implement Nuxt 4+ routing, middleware, composables, and server routes.

Community
Advanced
MaelwalserMaelwalser

nuxt4-patterns

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

Community
Intermediate
jkenney47jkenney47

optimize

Analyze and resolve interface performance bottlenecks for pages and components.

Community
Advanced
Tomlord1122Tomlord1122

tailwind-ssr

Configure TailwindCSS v4 with CSS-first setup and inline critical CSS for SSR apps.

Community
Advanced