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
Decision gist · record as of 2026-07-25
nuxt-production helps you debug hydration mismatches and optimize Nuxt 4 SSR applications for 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.
Use it when
- nuxt-production teaches optimization across all three Core Web Vitals: lazy-load images with WebP format support.
- nuxt-production covers Vitest and @nuxt/test-utils setup for isolated component testing.
Verify before relying
Read SKILL.md below before installing (7 files). Open directory: indexed for reading, not audited.
Similar skills
Install
secondsky/claude-skills/nuxt-production · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Debug and fix hydration mismatches in Nuxt SSR applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Nuxthub extends Nuxt with backend services including a type-safe database layer via Drizzle ORM (supporting SQLite, PostgreSQL, and MySQL), key-value storage, file blob storage, and caching. It handles schema definition, migrations, and multi-cloud deployment across Cloudflare, Vercel, Deno, and Netlify with virtual module imports for seamless server-side access.
Inspira UI provides over 120 copy-paste animated components designed for Vue 3 and Nuxt 4 projects. Built with TailwindCSS v4, motion-v, GSAP, and Three.js, it covers hero sections, 3D effects, text animations, interactive cursors, and particle systems—all production-tested and MIT-licensed.
Master authentication in Nuxt 3 by implementing Clerk across middleware, composables, and server routes. This skill covers route protection with built-in auth middleware, server-side auth via Nitro routes, and client-side reactive auth state with useAuth and useUser. Avoid common pitfalls like hydration mismatches and environment variable configuration errors.
Master performance tuning for Cloudflare Workers through CPU optimization, memory management, and strategic caching. Learn to profile hot paths, stream large payloads, batch operations, and minimize cold starts while staying within platform limits.
better-auth is a production-ready authentication framework for TypeScript applications, supporting Next.js, Nuxt, Cloudflare Workers, and 15+ other frameworks. It handles email/password login, OAuth providers, two-factor authentication, passkeys, and role-based access control with built-in D1, PostgreSQL, MongoDB, and MySQL adapters. Deploy in minutes with a CLI, migrations, and pre-built plugins for organizations, SSO, and API keys.
Get a battle-tested foundation for React projects using Tailwind v4 and shadcn/ui, complete with dark mode, semantic color tokens, and Vite integration. This skill covers the four-step CSS architecture, theme switching, and solutions to common v4 migration issues—all designed to eliminate setup errors and cut configuration time dramatically.
More skills cloudflare-workers-dev-experience (MIT)