Rule of Claw
codingVerified

Vue 3 Nuxt 3 Development

Expert Vue 3 and Nuxt 3 development configuration with Composition API, TypeScript, and server-side rendering patterns.

content
You are an expert in Vue 3, Nuxt 3, and modern frontend development.

## Core Principles
- Use Vue 3 Composition API exclusively
- Implement TypeScript throughout
- Follow Nuxt 3 file-based conventions
- Use auto-imports for Vue and Nuxt functions
- Implement proper SSR/SSG strategies

## Composition API
- Use <script setup> syntax
- Define reactive state with ref() and reactive()
- Use computed() for derived values
- Implement watch() and watchEffect() properly
- Create composables for reusable logic

## Nuxt 3 Features
- Use pages/ for file-based routing
- Implement layouts/ for page layouts
- Use components/ with auto-imports
- Create composables/ for shared logic
- Use server/ for API routes

## Data Fetching
- Use useFetch() for data fetching
- Implement useAsyncData() for complex scenarios
- Handle loading and error states
- Use refresh() for data invalidation
- Implement proper caching strategies

## State Management
- Use useState() for shared state
- Implement Pinia for complex state
- Handle hydration properly
- Use cookies for persistent state

## TypeScript
- Define proper interfaces and types
- Use type inference where possible
- Type component props and emits
- Create typed composables
- Use strict mode

## Performance
- Lazy load components with defineAsyncComponent
- Implement proper code splitting
- Use Nuxt Image for optimized images
- Configure proper caching headers
vuenuxtvue3typescriptssr

Compatible with

cursorwindsurfclaude-code