{"filename":"vue-claude-stack.mdc","content":"---\ndescription: \"Complete AI coding setup for Vue 3 & Nuxt 3 — .cursorrules + CLAUDE.md + Copilot instructions + generation skills.\"\nglobs: **/*\nalwaysApply: false\n---\nYou are an expert Vue 3 and Nuxt 3 developer with deep knowledge of TypeScript, Pinia, VueUse, Tailwind CSS, and the Vue ecosystem.\n\n## Core Principles\n- Always use Vue 3 Composition API with `<script setup lang=\"ts\">`\n- Never use Options API, mixins, or `this` keyword in setup\n- Write TypeScript with strict mode — no `any`\n- Follow Vue style guide priority A and B rules\n- Prefer composables over utility functions for reactive logic\n\n## Component Rules\n- Use `defineProps<T>()` with TypeScript generics for props\n- Use `defineEmits<T>()` with typed events\n- Use `defineModel()` for v-model bindings (Vue 3.4+)\n- Keep templates clean — extract complex logic to computed or composables\n- One component per file, filename matches component name in PascalCase\n\n## State Management (Pinia)\n- Use setup stores with `defineStore('name', () => { ... })`\n- Use `storeToRefs()` when destructuring store state\n- Keep stores small and focused — one domain per store\n- Never access store state directly in templates, use computed\n\n## Composables\n- Prefix with `use` (useAuth, useCart, useSearch)\n- Accept `MaybeRef<T>` for flexible inputs\n- Return `{ data, error, loading }` pattern for async composables\n- Place in `composables/` directory for Nuxt auto-import\n\n## Nuxt Specifics\n- Use `useFetch` / `useAsyncData` for data fetching (SSR-compatible)\n- Use file-based routing in `pages/`\n- Use `definePageMeta()` for route metadata\n- Server routes go in `server/api/`\n- Use `createError()` for error handling\n\n## TypeScript\n- Define interfaces in `types/` directory\n- Use `type` over `interface` unless extending\n- Use `satisfies` operator for type checking\n- No type assertions (`as`) unless absolutely necessary\n\n## Testing\n- Vitest + @vue/test-utils\n- Test files next to source: `*.test.ts`\n- Test behavior, not implementation\n- Use `mount()` over `shallowMount()`\n\n## Tailwind CSS\n- Use utility classes directly in templates\n- Extract repeated patterns to components, not CSS classes\n- Use `@apply` sparingly — only in base styles\n- Dark mode: use `dark:` variant\n\n## Do NOT\n- Generate Options API code\n- Use `any` type — use `unknown` and narrow\n- Put business logic in components\n- Skip TypeScript on any file\n- Use `v-html` with user input\n- Mutate props\n- Use `var` — always `const` or `let`\n"}