# Build Nuxt Apps With Framework Guidance

Nuxt projects require correct choices across SSR, routing, data fetching, modules, and deployment. This skill gives Claude, Codex, and Claude Code focused Nuxt guidance from framework-oriented references.

## Install

```bash
npx skillstore add antfu/nuxt
```

## Metadata

- - Slug: antfu-nuxt
- - Version: 1.0.0
- - Author: antfu
- - GitHub username: antfu
- - License: MIT
- - Repository: https://github.com/antfu/skills/tree/main/skills/nuxt/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, network, filesystem, scripts, env\_access
- - Quality score: 76
- - Public page: https://skillstore.pages.dev/skills/antfu-nuxt
- - Manifest: https://skillstore.pages.dev/api/skills/antfu-nuxt/manifest

## Capabilities

- Explains Nuxt directory structure, special files, and project organization.
- Guides routing, layouts, middleware, route validation, and navigation patterns.
- Supports SSR-safe data fetching with useFetch, useAsyncData, and $fetch guidance.
- Covers Nuxt server routes, middleware, cookies, headers, and Nitro deployment basics.
- Provides module authoring, hooks, layers, auto-imports, and configuration guidance.
- Helps compare rendering modes, route rules, static generation, and deployment presets.

## Use Cases

- Plan a Nuxt application structure: Choose folders, routing conventions, middleware placement, and configuration boundaries for a new Nuxt project.
- Fix SSR and hydration issues: Identify unsafe browser APIs, shared server state, and data fetching patterns that cause hydration mismatches.
- Prepare Nuxt for deployment: Select rendering modes, Nitro presets, static generation, and runtime configuration for a target hosting platform.

## Prompt Templates

### Explain a Nuxt concept

```
Explain how Nuxt file-based routing works for this app. Include where pages, layouts, middleware, and route validation belong.
```

### Review data fetching

```
Review my Nuxt data fetching approach. Tell me when to use useFetch, useAsyncData, or $fetch, and point out SSR risks.
```

### Design server routes

```
Design the Nuxt server route structure for this feature. Include API routes, middleware, request validation, cookies, and runtime config needs.
```

### Plan advanced architecture

```
Create a Nuxt architecture plan using layers, modules, hooks, rendering rules, and deployment presets for these product requirements.
```

## Limitations

- It is based on Nuxt 3.x reference material generated on 2026-01-28.
- It does not execute, test, or deploy Nuxt projects by itself.
- It cannot verify private project code unless the user provides the code or repository context.
- It may not include changes introduced after the referenced Nuxt documentation snapshot.

## Best Practices

- Provide the Nuxt version, deployment target, and rendering requirements before asking for architecture advice.
- Include relevant files such as nuxt.config.ts, route files, composables, and server handlers for precise review.
- Ask for SSR and client behavior separately when debugging hydration, state, or data fetching issues.

## Anti Patterns

- Do not ask for generic Vue advice when the issue depends on Nuxt routing, Nitro, or SSR behavior.
- Do not expose server-only runtime configuration under public config keys.
- Do not use browser-only APIs during server rendering without a client-only guard or alternative.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T09:02:34.935\+00:00
- - Summary: Static analysis reported many command, network, filesystem, script, and environment patterns, but review shows they are Markdown documentation examples for Nuxt. No prompt injection, hidden executable code, credential exfiltration, or malicious automation was found in the reviewed files.

## Stats

- - Views: 872
- - Downloads: 15
- - Favorites: 0
- - Popularity score: 0