Agent skill · software engineering · secondsky
nuxt-production
| Nuxt 4 production optimization: hydration, performance, testing with Vitest, deployment to Cloudflare/Vercel/Netlify, and v4 migration. Use when: debugging hydration mismatches, optimizing performance and Core Web Vitals, writing tests with Vitest, deploying to Cloudflare Pages/Workers/Vercel/Netlify, or migrating from Nuxt 3 to Nuxt 4.
Why this skill is useful
Provides specific patterns and commands for optimizing Nuxt 4 applications, which the AI wouldn't reliably generate on its own.
What it needs
Requires nuxt installed locally. About 7k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Nuxt 4 Production Guide Hydration, performance, testing, deployment, and migration patterns. What's New in Nuxt 4 v4.2 Features (Latest) 1. Abort Control for Data Fetching 2. Async Data Handler Extraction 39% smaller client bundles Data fetching logic extracted to server chunks Automatic optimization (no config needed) 3. Enhanced Error Handling Dual error display: custom error page + technical overlay Better error messages in development v4.1 Features 1. Enhanced Chunk Stability Import maps prevent cascading hash changes Better long-term caching 2. Lazy Hydration Breaking Changes from v3 Change v3 v4 -------- ---- ---- Source directory Root app/ Data reactivity Deep Shallow (default) Default values null undefined Route middleware Client Server App manifest Opt-in Default When to Load References Load references/hydration.md when: Debugging "Hydration node mismatch" errors Implementing ClientOnly components Fixing non-deterministic rendering issues Understanding SSR vs client rendering Load references/performance.md when: Optimizing Core Web Vitals scores Implementing lazy loading and code splitting Configuring caching strategies Reducing bundle size Load references/testing-vitest.md when: Writing component tests with @nuxt/test-utils Testing composables with Nuxt context Mocking Nuxt APIs (useFetch, useRoute) Setting up Vitest configuration Load references/deployment-cloudflare.md when: Deploying to Cloudflare Pages or Workers Configuring wrangler.toml Setting up NuxtHub integration Working with D1, KV, R2 bindings Hydration Best Practices What Causes Hydration Mismatches Cause Example Fix ------- --------- ----- Non-deterministic values Math.random() Use useState Browser APIs on server window.innerWidth Use onMounted Date/time on server new Date() Use useState or ClientOnly Third-party scripts Analytics Use ClientOnly Fix Patterns Non-deterministic Values: Browser APIs: ClientOnly Component: Conditional Rendering: Performance Optimization Lazy Loading Components La …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/nuxt-production