Nuxt 3 Development Patterns

Master full-stack Vue development with Nuxt 3 using Cursor IDE and Claude Code. These patterns cover server-side rendering, API routes, data fetching, deployment, and the unique features that make Nuxt a powerful framework for production applications.

Quick Setup for Nuxt Projects

Initialize Nuxt 3 with AI

Cursor IDE

1. Open Cursor and create a new folder
2. Launch Agent mode (Cmd/Ctrl + I)
3. Prompt: “Create a new Nuxt 3 project with TypeScript, Tailwind CSS, Pinia, and @nuxt/test-utils for testing. Include ESLint and Prettier configuration”
4. Enable YOLO mode for automatic execution
5. Review the nuxt.config.ts and project structure

Claude Code

1. Navigate to your projects directory
2. Run claude in terminal
3. Execute: “Initialize a Nuxt 3 project with TypeScript, server routes, Nitro deployment config, and testing setup. Add Tailwind CSS and Pinia modules”
4. Claude will scaffold and configure everything
5. Run /init to create Nuxt-specific CLAUDE.md

Configure AI Context for Nuxt

.cursor/rules/nuxt-patterns.md

# Nuxt 3 Development Rules

## Framework Conventions
- Use Nuxt 3 auto-imports (no manual imports for Vue, composables)
- File-based routing in pages/ directory
- Server routes in server/api/
- Composables in composables/ directory
- Middleware in middleware/ directory

## Code Standards
- TypeScript for all files
- Composition API with <script setup>
- Use Nuxt composables (useFetch, useAsyncData, useState)
- Server-side data fetching in setup

## Performance Guidelines
- Lazy load components with Lazy prefix
- Use nitro prerender for static pages
- Implement proper caching strategies
- Optimize images with @nuxt/image

Server-Side Patterns

API Route Development

RESTful API

Creating Server Routes:

Cursor/Claude Prompt

Create a complete CRUD API for products in server/api/:
1. GET /api/products - list with pagination
2. GET /api/products/[id] - single product
3. POST /api/products - create with validation
4. PUT /api/products/[id] - update
5. DELETE /api/products/[id] - soft delete

Include:
- Zod validation schemas
- Error handling middleware
- TypeScript types shared with frontend
- Rate limiting
- Authentication checks

tRPC Integration

Type-Safe API with tRPC:

Set up tRPC in our Nuxt app:
1. Install and configure @trpc/server for Nuxt
2. Create typed router with procedures
3. Set up client-side hooks
4. Share types between client/server
5. Add authentication context
6. Implement error handling

Database Integration

Prisma with Nuxt:

Configure Prisma for our Nuxt app:
1. Set up Prisma with SQLite for development
2. Create schema for users, posts, comments
3. Generate Prisma client
4. Create server utils for database access
5. Add migration scripts
6. Implement connection pooling
7. Set up seed data

Note

💡 Pro Tip: Ask AI to create a server/utils/db.ts file that exports a cached Prisma client instance to avoid connection issues in development.

Data Fetching Patterns

Advanced useFetch Patterns

Data Fetching Examples

Create examples showing:
1. Parallel data fetching with Promise.all
2. Dependent queries with watch
3. Infinite scroll with useFetch
4. Real-time updates with EventSource
5. Optimistic updates
6. Global error handling
7. Request deduplication

State Management

Global State with Pinia:

1. Store Setup

   Create a Pinia store for our e-commerce app that:
   - Integrates with Nuxt's useFetch
   - Handles SSR hydration properly
   - Implements persist plugin for client-side
   - Has actions that work on both server and client

2. Cross-Request State Pollution Prevention

   Show me how to prevent state pollution in SSR by:
   - Using useState for request-scoped state
   - Properly resetting Pinia stores
   - Implementing factory functions

Nuxt-Specific Features

Auto-imports Management

Analyze our Nuxt app and:
1. Set up custom auto-imports in nuxt.config
2. Create type-safe composables
3. Configure component auto-imports
4. Set up utility auto-imports
5. Handle naming collisions
6. Generate proper TypeScript declarations

Middleware Patterns

Route Middleware

Create auth middleware that:
- Checks JWT tokens
- Redirects to login
- Handles refresh tokens
- Works with SSR/SPA modes

Server Middleware

Implement server middleware for:
- Request logging
- CORS handling
- Rate limiting
- Security headers

Performance Optimization

Nitro Deployment

Production Configuration:

Configure Nitro for production:
1. Set up prerendering rules
2. Configure edge function deployment
3. Implement ISR (Incremental Static Regeneration)
4. Set up caching headers
5. Configure CDN integration
6. Optimize cold starts
7. Set up health checks

Bundle Optimization

Code Splitting

Optimize our Nuxt app bundles:
- Analyze with @nuxt/analyze
- Implement route-based splitting
- Lazy load heavy components
- Extract vendor chunks
- Tree-shake unused code
- Optimize Tailwind CSS

Image Optimization

Set up @nuxt/image module:
- Configure providers (Cloudinary, Vercel)
- Implement responsive images
- Add lazy loading
- Set up blur placeholders
- Configure WebP generation
- Implement art direction

Testing Strategies

Component Testing

Nuxt Testing Recipe

Write tests for our Nuxt components:
1. Set up @nuxt/test-utils
2. Test pages with route parameters
3. Mock useFetch responses
4. Test error boundaries
5. Verify SEO meta tags
6. Test suspense boundaries
7. Mock authentication state

E2E Testing

Create Playwright tests for critical flows:
- Test SSR/hydration
- Verify API routes work
- Test form submissions
- Check SEO elements
- Test error pages
- Verify redirects
- Test i18n routing

Advanced Patterns

Multi-tenancy

Implement multi-tenant architecture:
1. Domain-based tenant detection
2. Tenant-specific middleware
3. Database isolation strategies
4. Theme customization per tenant
5. Tenant-specific API routes
6. Shared component library

Real-time Features

WebSocket Integration:

Add real-time features with Nitro WebSockets:
1. Set up WebSocket server
2. Implement chat functionality
3. Add presence indicators
4. Handle reconnection logic
5. Scale with Redis pub/sub
6. Add authentication

SEO & Meta Management

Dynamic Meta Tags

Implement comprehensive SEO:
- Dynamic og:image generation
- JSON-LD structured data
- Sitemap generation
- Robots.txt management
- Canonical URL handling
- Multi-language SEO
- Social media cards

Common Issues & Solutions

Hydration Mismatches

Debugging Pattern:

My Nuxt app has hydration errors. Help me:
1. Identify the source using Vue devtools
2. Add client-only wrappers where needed
3. Fix date/time formatting issues
4. Handle user-specific content
5. Debug with --no-ssr flag

Memory Leaks

Analyze and fix memory leaks:
- Check event listener cleanup
- Review reactive data usage
- Audit third-party plugins
- Profile with Chrome DevTools
- Implement proper dispose methods

Deployment Patterns

Platform-Specific Configs

Vercel

Configure for Vercel deployment:
- Set up vercel.json
- Configure edge functions
- Set environment variables
- Implement preview deployments
- Add analytics

Docker

Create production Docker setup:
- Multi-stage Dockerfile
- Optimize image size
- Configure health checks
- Set up compose file
- Add nginx proxy

Migration from Nuxt 2

Help me migrate from Nuxt 2 to Nuxt 3:
1. Audit current modules usage
2. Update configuration syntax
3. Convert to Composition API
4. Update data fetching patterns
5. Migrate Vuex to Pinia
6. Update build configuration
7. Test and fix edge cases

Next Steps

• Explore Vue Patterns for component techniques
• Check Next.js Patterns for React full-stack comparison
• Learn Node.js Patterns for advanced server features

Tip

Remember: Nuxt 3’s power comes from its conventions. Let AI handle the boilerplate while you focus on business logic and user experience.