# Build Nuxt 4\+ Applications

Developers need guidance on Nuxt 4 patterns for server routes, file-based routing, middleware, plugins, and configuration. This skill provides progressive reference documentation with latest Nuxt conventions and examples.

## Install

```bash
npx skillstore add onmax/nuxt
```

## Metadata

- - Slug: onmax-nuxt
- - Version: 1.0.0
- - Author: onmax
- - GitHub username: onmax
- - License: MIT
- - Repository: https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: safe
- - Risk factors: network, filesystem
- - Quality score: 79
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/onmax-nuxt
- - Manifest: https://skillstore.pages.dev/api/skills/onmax-nuxt/manifest

## Capabilities

- Provide guidance on Nuxt 4\+ server routes, API endpoints, and server middleware
- Explain file-based routing patterns, route groups, and typed router
- Document Nuxt middleware types, plugins, and app lifecycle hooks
- Detail Nuxt composables like useFetch, useRequestURL, and navigation helpers
- Show Nuxt component usage including NuxtLink, NuxtImg, and NuxtTime
- Cover nuxt.config.ts configuration, modules, auto-imports, and layers

## Use Cases

- Create API Endpoints: Build server routes with validation, WebSocket support, and SSE using h3 helpers and Nitro patterns.
- Set Up Routing and Middleware: Configure file-based routing, route groups, authentication middleware, and navigation guards.
- Configure Nuxt Projects: Set up nuxt.config.ts with modules, runtime config, auto-imports, and project layers.

## Prompt Templates

### Create Server Route

```
I need to create a Nuxt 4 server route at /api/users that returns a list of users with validation. Load references/server.md for h3 validation patterns and proper route structure.
```

### Add Route Middleware

```
I want to add authentication middleware that redirects unauthenticated users. Load references/middleware-plugins.md to see Nuxt 4 middleware patterns and global vs named middleware.
```

### Configure Runtime Config

```
How do I configure runtimeConfig in nuxt.config.ts to access environment variables on the server side? Show references/nuxt-config.md patterns for private and public config.
```

### Use Nuxt Composables

```
I need to make a fetch request in my Nuxt page. Load references/nuxt-composables.md to see how useFetch works and proper SSR considerations.
```

## Limitations

- Does not execute code or modify user projects directly
- Does not install packages or run build commands
- Does not access external APIs or services
- Provides documentation only - no runtime functionality

## Best Practices

- Use named exports for route middleware instead of global unless truly global
- Return navigateTo\(\) from middleware, never use router.push\(\) directly
- Validate API inputs with Zod schema at the route handler level
- Use useFetch\(\) with proper keys for SSR data fetching and caching

## Anti Patterns

- Using Vue 3 router.push\(\) instead of navigateTo\(\) in middleware
- Skipping input validation on server routes
- Mixing client and server-only code without proper runtimeConfig usage
- Not using .global.ts suffix for global middleware

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-02-09T09:02:25.024\+00:00
- - Summary: Documentation-only skill containing markdown reference files for Nuxt 4\+ development. All static findings are false positives from markdown code examples. No executable code, network calls, or credential access.

## Stats

- - Views: 169
- - Downloads: 9
- - Favorites: 0
- - Popularity score: 0