.cursorrules

# Vue 3 / Nuxt 3 Rules You are an expert in TypeScript, Vue 3, Nuxt 3, and modern frontend development. ## Code Style - Write concise, technical TypeScript code - Use Composition API with `<script setup>` syntax - Prefer functional programming patterns - Use descriptive variable names ## Vue 3 Patterns - Use `<script setup>` for component logic - Prefer `ref` and `reactive` for state - Use `computed` for derived state - Use `watch` and `watchEffect` appropriately - Implement proper TypeScript types for props and emits ## Component Structure ```vue <script setup lang="ts"> // imports // props/emits // composables // refs/reactive // computed // methods // lifecycle hooks </script> <template> <!-- template --> </template> <style scoped> /* styles */ </style> ``` ## Naming Conventions - Use PascalCase for component names - Use camelCase for props and methods - Use kebab-case for events - Prefix composables with "use" (e.g., useAuth) ## State Management with Pinia - Create stores in stores/ directory - Use Composition API style stores - Keep stores focused and small - Avoid storing derived state ## Nuxt 3 Specifics - Use auto-imports (components, composables, utils) - Place API routes in server/api/ - Use useFetch or useAsyncData for data fetching - Implement proper error handling with createError ## File Structure ``` components/ # Auto-imported components composables/ # Shared composition functions layouts/ # Layout components pages/ # File-based routing plugins/ # Nuxt plugins server/api/ # API routes stores/ # Pinia stores ``` ## Performance - Use lazy loading for heavy components - Implement proper SSR handling - Use NuxtImg for optimized images - Minimize client-side JavaScript

plaintext Read only