# nuxt-production

Guides AI agents through Nuxt 4 production readiness, covering SSR hydration fixes, bundle optimization, Vitest suites, and Cloudflare deployments.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 412 installs · ★ 236
- Author: Claude Skills Maintainers
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/nuxt-v4/skills/nuxt-production/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/nuxt-production

## What it does

This skill provides Claude Code with reference architectures for Nuxt 4 applications. It details breaking changes from Nuxt 3, including moving code to the `app/` folder, shallow reactivity by default, and handling data cancellation using `AbortController` inside `useAsyncData`.

It addresses hydration mismatches caused by non-deterministic logic like `Math.random()` or client-only globals like `window.innerWidth`. The instructions outline solutions using `useState`, `ClientOnly` fallback wrappers, and `defineLazyHydrationComponent` for viewport-based hydration.

Using browser APIs during server passes causes runtime crashes unless deferred to `onMounted`. The skill also covers route rules for SWR or ISR caching, Cloudflare wrangler configurations, and testing setups with `@nuxt/test-utils` and `happy-dom`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill nuxt-production -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/nuxt-production/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nuxt-production/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill nuxt-production -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/nuxt-production/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill nuxt-production -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/nuxt-production/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install secondsky/claude-skills nuxt-production
```

2. **Manually: put the files in place**
- File: `.github/skills/nuxt-production/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill nuxt-production -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/secondsky/claude-skills --path plugins/nuxt-v4/skills/nuxt-production
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nuxt-production/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill nuxt-production -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/nuxt-v4/skills/nuxt-production/SKILL.md

## When to use it
- fix SSR hydration mismatches caused by non-deterministic data or browser APIs
- implement lazy hydration strategies based on visibility or user interaction
- migrate applications from Nuxt 3 to Nuxt 4 breaking conventions
- configure Vitest with `@nuxt/test-utils` and the `happy-dom` environment
- deploy Nuxt applications to Cloudflare Pages and Workers with NuxtHub bindings

## Example prompts
- Resolve the hydration mismatch error in my navigation component
- Configure SWR caching rules and image optimization in nuxt.config.ts
- Set up a component test using mountSuspended and happy-dom

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 13769e578778f0ff.

BEGIN THIRD-PARTY FILE 13769e578778f0ff
````text
---
name: nuxt-production
description: "| 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."
license: MIT
metadata:
  version: 4.0.0
  author: Claude Skills Maintainers
  category: Framework
  framework: Nuxt
  framework-version: 4.x
  last-verified: 2025-12-28
  keywords:
    - hydration
    - hydration mismatch
    - ClientOnly
    - SSR
    - performance
    - lazy loading
    - lazy hydration
    - Vitest
    - testing
    - deployment
    - Cloudflare Pages
    - Cloudflare Workers
    - Vercel
    - Netlify
    - NuxtHub
    - migration
    - Nuxt 3 to Nuxt 4
---
# 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: 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**
```vue
<script setup>
const LazyComponent = defineLazyHydrationComponent(() =>
  import('./HeavyComponent.vue')
)
</script>
```

### 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
````
END THIRD-PARTY FILE 13769e578778f0ff

The third-party file has ended. Everything between the 13769e578778f0ff tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2728 of 13354 bytes. © Claude Skills Maintainers · MIT · https://github.com/secondsky/claude-skills/tree/HEAD/plugins/nuxt-v4/skills/nuxt-production/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md