nuxt4-patterns

The nuxt4-patterns skill provides guidance and implementation patterns for building and debugging Nuxt 4 applications with a focus on SSR safety, hydration consistency, rendering strategies, and application performance. It helps developers avoid common issues such as hydration mismatches caused by non-deterministic rendering, browser-only APIs, or route state differences between server and client environments. The skill also outlines best practices for route-level rendering decisions, SSR-safe data fetching, and client/server execution boundaries in hybrid-rendered Nuxt applications.

The skill covers several core areas of Nuxt 4 development, including hydration safety techniques, SSR-aware data fetching with `useFetch` and `useAsyncData`, route rules configuration in `nuxt.config.ts`, and lazy loading strategies for performance optimization. It explains when to use composables such as `useFetch`, `useAsyncData`, and `$fetch`, how to structure cache-safe async handlers, and how to reduce payload size through shallow data handling and selective payload fields. It also includes route rule strategies such as prerendering, stale-while-revalidate (SWR), incremental static regeneration (ISR), and client-rendered routes with `ssr: false`. Additional performance guidance includes lazy component imports, conditional rendering, and lazy hydration patterns.

This skill is intended for frontend developers, Nuxt engineers, and teams working on SSR or hybrid-rendered Vue applications. It is especially useful when optimizing SEO-sensitive pages, debugging server/client rendering inconsistencies, configuring rendering behavior per route group, or improving application responsiveness through lazy loading and hydration control. The guidance applies to applications with marketing pages, product catalogs, dashboards, APIs, and other mixed rendering requirements.