skills.rest
ibytechaos
ibytechaosCOMMUNITY
Explore all skills by this author →
GitHub

nuxt4-patterns

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

1|Updated Oct 11, 2025
Search Tags:#vue#lazy loading#ssr#hydration#nuxt#usefetch#route rules
One-click install
npx skills add https://github.com/ibytechaos/claude --skill nuxt4-patterns-ibytechaos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt4-patterns
Source: https://github.com/ibytechaos/claude/tree/main/plugins/everything-claude-code/skills/nuxt4-patterns
Command: npx skills add https://github.com/ibytechaos/claude --skill nuxt4-patterns-ibytechaos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Nuxt 4 apps 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 or debugging SSR and hybrid-rendered Nuxt applications. ## Core Features & Use Cases - Hydration Safety: Guidance for keeping server-rendered markup deterministic, isolating browser-only logic with onMounted, import.meta.client, ClientOnly, and .client.vue components. - SSR-Safe Data Fetching: Rules for choosing between useFetch, useAsyncData, $fetch, and lazy variants, including payload trimming with pick and stable cache keys. - 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 Nuxt page shows hydration mismatch warnings after adding a timestamp or reading localStorage in a template, use this Skill to restructure the code so server and client renders match. ## Quick Start Ask the assistant to review your Nuxt 4 page or component for hydration safety and correct useFetch or useAsyncData usage.

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 template 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-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-path strategies: prerender for static pages, swr for cached content with background revalidation, isr for incremental regeneration, and ssr false for client-only routes like admin dashboards.

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 to a lazily hydrated component triggers hydration immediately.

Why should I avoid $fetch for top-level page data in Nuxt?▼

$fetch does not integrate with the Nuxt payload, so data fetched on the server is refetched on the client during hydration. Use useFetch or useAsyncData for page data and reserve $fetch for user-triggered writes or client-only actions.

Related Skills

Explore More Software Engineering Skills→
idiaz01idiaz01
3

nuxt4-patterns

Mitigate hydration mismatches and SSR data-fetching pitfalls in Nuxt 4 applications.

Community
Advanced
MaelwalserMaelwalser

nuxt4-patterns

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

Community
Intermediate
nekorush14nekorush14
4

nextjs-optimization

Optimize Next.js applications for performance and SEO with image, font, and bundle improvements.

Community
Advanced
RepairYourTechRepairYourTech
6

nuxt

Create full-stack Vue.js applications with Nuxt.js file-based routing and Nitro server routes.

Community
Advanced