nuxt-production
Master Nuxt 4 production patterns for server-side rendering, from resolving hydration conflicts to deploying across major platforms. This skill covers performance optimization, Vitest testing strategies, and migration guidance from Nuxt 3, with practical solutions for common SSR pitfalls.
nuxt-production helps you debug hydration mismatches and optimize Nuxt 4 SSR applications for production.
AI-generated summary based on this skill's SKILL.md
Install
secondsky/claude-skills/nuxt-production · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/nuxt-v4/skills/nuxt-production ~/.claude/skills/nuxt-productionFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I fix hydration node mismatch errors in Nuxt?
nuxt-production addresses hydration mismatches by teaching you to identify where server and client HTML diverge. Common causes include conditional rendering based on client-only state, timezone-dependent content, and async data timing. Use `<ClientOnly>` wrappers for client-specific UI, ensure server and client render identical initial HTML, and leverage `useAsyncData` with proper SSR handling. The skill covers debugging strategies and practical patterns to eliminate hydration warnings in production.
What's the best way to optimize Nuxt performance and Core Web Vitals?
nuxt-production teaches optimization across all three Core Web Vitals: lazy-load images with WebP format support, defer non-critical JavaScript, and minimize layout shifts with size hints. Strategies include route-based code splitting, server-side caching with ISR/SWR patterns, and bundle size reduction through tree-shaking and dynamic imports. The skill provides concrete configuration examples and monitoring approaches to measure and sustain high performance scores.
How do I set up component testing in Nuxt with Vitest?
nuxt-production covers Vitest and @nuxt/test-utils setup for isolated component testing. You'll learn to mock composables like `useFetch`, stub server routes, and test async components with Suspense. The skill includes patterns for testing components that depend on Nuxt's auto-imports, handling SSR-specific logic in tests, and integrating tests into CI/CD pipelines for production-grade reliability.
How do I deploy a Nuxt 4 app to Cloudflare, Vercel, or Netlify?
nuxt-production guides deployment across all three platforms with platform-specific configurations. For Cloudflare Pages, integrate Wrangler and D1 databases; for Vercel, optimize serverless function cold starts; for Netlify, configure edge functions and environment variables. The skill covers pre-rendering strategies, environment setup, and troubleshooting common deployment issues to ensure smooth production releases.
What are the key breaking changes when migrating from Nuxt 3 to Nuxt 4?
nuxt-production provides a migration roadmap for Nuxt 3 to Nuxt 4 upgrades, covering breaking changes in composables, auto-imports, and build configuration. The skill explains deprecations, required dependency updates, and patterns to maintain backward compatibility during transition. Step-by-step guidance helps you modernize your codebase while managing risk in production environments.
What are the best practices for using ClientOnly components in Nuxt?
nuxt-production teaches ClientOnly component best practices to prevent hydration mismatches when rendering client-only features. Use ClientOnly for browser APIs, interactive widgets, and state-dependent UI that cannot render identically on the server. The skill shows how to combine ClientOnly with fallback slots, lazy hydration patterns, and visible-interaction strategies to maintain performance while ensuring correct hydration behavior.
SKILL.md
rendered from the published skill — quoted content, verbatim
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 ```typescript const controller = ref<AbortController>()
const { data } = await useAsyncData( 'users', () => $fetch('/api/users', { signal:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 7 files
plugins/nuxt-v4/skills/nuxt-production/SKILL.md
plugins/nuxt-v4/skills/nuxt-production/references/deployment-cloudflare.md
plugins/nuxt-v4/skills/nuxt-production/references/hydration.md
plugins/nuxt-v4/skills/nuxt-production/references/performance.md
plugins/nuxt-v4/skills/nuxt-production/references/testing-vitest.md
plugins/nuxt-v4/skills/nuxt-production/templates/tests/components/BlogPost.test.ts
plugins/nuxt-v4/skills/nuxt-production/templates/wrangler.toml