Nuxt Production

This is your production playbook for Nuxt 4, covering the stuff that breaks when you ship: hydration mismatches, performance bottlenecks, and deployment configs. It walks through the v4 breaking changes (new app directory, shallow reactivity by default, server-first middleware), then digs into practical fixes for common hydration errors like Math.random() or window access on the server. The performance section covers lazy hydration strategies, route caching with SWR and ISR, and image optimization. Testing guidance uses Vitest with @nuxt/test-utils for component and composable testing. Deployment references target Cloudflare Pages, Workers, Vercel, and Netlify with actual config examples. Load this when you're debugging "Hydration node mismatch" errors, optimizing Core Web Vitals, or migrating from v3.

skills.sh installs: 425
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill nuxt-production --agent claude-code

Installs into .claude/skills of the current project.

Files

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

const controller = ref<AbortController>()

const { data } = await useAsyncData(
  'users',
  () => $fetch('/api/users', { signal: controller.value?.signal })
)

const abortRequest = () => {
  controller.value?.abort()
  controller.value = new AbortController()
}

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

<script setup>
const LazyComponent = defineLazyHydrationComponent(() =>
  import('./HeavyComponent.vue')
)
</script>

Breaking Changes from v3

SKILL.md on GitHub

Details

Repository: github.com/secondsky/claude-skills
Categories: Frontend Development, Testing & QA, Documentation, Debugging, Cloud & Infrastructure
First seen: Jun 3, 2026