# Vue 3 + Nuxt 3 Rules

## Composition API
- Always use <script setup lang="ts">
- Use ref() for primitives, reactive() for objects
- Use computed() instead of methods for derived state
- Use watchEffect() over watch() when possible
- Extract composables to composables/ directory

## Components
- Use SFC (Single File Components) with .vue extension
- Props: use defineProps<T>() with TypeScript interfaces
- Emits: use defineEmits<T>() for type-safe events
- Slots: use <slot> with named slots for complex layouts
- Keep components under 200 lines

## Nuxt Specifics
- Use auto-imports (no manual importing of Vue/Nuxt APIs)
- Use /server/api/ for API routes
- Use useFetch/useAsyncData for data fetching
- Use useState for shared state across components
- Use middleware/ for route guards

## Styling
- Use <style scoped> to prevent CSS leaking
- Use Tailwind CSS or UnoCSS
- Use CSS variables for theming