{"enrichment":{"faq":[{"a":"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.","q":"How do I fix hydration node mismatch errors in Nuxt?"},{"a":"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.","q":"What's the best way to optimize Nuxt performance and Core Web Vitals?"},{"a":"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.","q":"How do I set up component testing in Nuxt with Vitest?"},{"a":"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.","q":"How do I deploy a Nuxt 4 app to Cloudflare, Vercel, or Netlify?"},{"a":"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.","q":"What are the key breaking changes when migrating from Nuxt 3 to Nuxt 4?"},{"a":"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.","q":"What are the best practices for using ClientOnly components in Nuxt?"}],"shadow_tags":["ssr-hydration","web-vitals","unit-testing","edge-deployment","framework-upgrade","lazy-loading","api-mocking","cache-strategy","serverless-functions","image-optimization"],"summary_rewrite":"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."},"files":[{"bytes":13354,"path":"plugins/nuxt-v4/skills/nuxt-production/SKILL.md","sha256":"8391c2d8c038792c2452c6f319d058b15e2541da7c7cb65c9276830a7f36f271","url":"https://skillfed.io/files/secondsky/claude-skills/nuxt-production/866ed1fb/SKILL.md"}],"id":"secondsky/claude-skills/nuxt-production","links":{"html":"https://skillfed.io/secondsky/claude-skills/nuxt-production","md":"https://skillfed.io/secondsky/claude-skills/nuxt-production.md","repo":"https://github.com/secondsky/claude-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":29,"language":"TypeScript","last_updated":"2026-07-25","license":"MIT","name":"nuxt-production","publisher":"secondsky","stars":196},"relations":{"similar":[{"id":"affaan-m/ECC/nuxt4-patterns"},{"id":"martinholovsky/claude-skills-generator/vue-nuxt-expert"},{"id":"jiaiyan/element-plus-skills/element-plus-ssr"},{"id":"onmax/nuxt-skills/nuxthub"},{"id":"onmax/nuxt-skills/nuxt-better-auth"},{"id":"clerk/skills/clerk-nuxt-patterns"},{"id":"antfu/skills/nuxt"},{"id":"secondsky/claude-skills/nuxt-studio"},{"id":"hairyf/skills/nuxt"},{"id":"secondsky/claude-skills/maz-ui"}]},"slug":{"owner":"secondsky","repo":"claude-skills","skill":"nuxt-production"},"version":"866ed1fb"}