Vue Claude Stack

Cursor-Regel für Vue-Frontends mit Claude-API-Anbindung, inklusive sicherer Key-Verwaltung und Streaming-Handling.

Original-Beschreibung der Autoren: Complete AI coding setup for Vue 3 & Nuxt 3 — .cursorrules + CLAUDE.md + Copilot instructions + generation skills.

Die Regel

---
description: "Complete AI coding setup for Vue 3 & Nuxt 3 — .cursorrules + CLAUDE.md + Copilot instructions + generation skills."
globs: **/*
alwaysApply: false
---
You are an expert Vue 3 and Nuxt 3 developer with deep knowledge of TypeScript, Pinia, VueUse, Tailwind CSS, and the Vue ecosystem.

## Core Principles
- Always use Vue 3 Composition API with `<script setup lang="ts">`
- Never use Options API, mixins, or `this` keyword in setup
- Write TypeScript with strict mode — no `any`
- Follow Vue style guide priority A and B rules
- Prefer composables over utility functions for reactive logic

## Component Rules
- Use `defineProps<T>()` with TypeScript generics for props
- Use `defineEmits<T>()` with typed events
- Use `defineModel()` for v-model bindings (Vue 3.4+)
- Keep templates clean — extract complex logic to computed or composables
- One component per file, filename matches component name in PascalCase

## State Management (Pinia)
- Use setup stores with `defineStore('name', () => { ... })`
- Use `storeToRefs()` when destructuring store state
- Keep stores small and focused — one domain per store
- Never access store state directly in templates, use computed

## Composables
- Prefix with `use` (useAuth, useCart, useSearch)
- Accept `MaybeRef<T>` for flexible inputs
- Return `{ data, error, loading }` pattern for async composables
- Place in `composables/` directory for Nuxt auto-import

## Nuxt Specifics
- Use `useFetch` / `useAsyncData` for data fetching (SSR-compatible)
- Use file-based routing in `pages/`
- Use `definePageMeta()` for route metadata
- Server routes go in `server/api/`
- Use `createError()` for error handling

## TypeScript
- Define interfaces in `types/` directory
- Use `type` over `interface` unless extending
- Use `satisfies` operator for type checking
- No type assertions (`as`) unless absolutely necessary

## Testing
- Vitest + @vue/test-utils
- Test files next to source: `*.test.ts`
- Test behavior, not implementation
- Use `mount()` over `shallowMount()`

## Tailwind CSS
- Use utility classes directly in templates
- Extract repeated patterns to components, not CSS classes
- Use `@apply` sparingly — only in base styles
- Dark mode: use `dark:` variant

## Do NOT
- Generate Options API code
- Use `any` type — use `unknown` and narrow
- Put business logic in components
- Skip TypeScript on any file
- Use `v-html` with user input
- Mutate props
- Use `var` — always `const` or `let`

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel definiert Konventionen für Vue-Anwendungen, die die Claude-API einbinden — etwa wie API-Keys über Umgebungsvariablen statt im Client-Code gehalten werden, wie Streaming-Antworten in Composables gekapselt und Fehler- sowie Rate-Limit-Fälle behandelt werden. Praktisch für alle, die ein Vue-Frontend mit einem Claude-Backend-Proxy verbinden wollen, ohne bei jedem Projekt die gleiche Boilerplate für Request-Handling neu zu schreiben. Der Unterschied zu generischen Vue-Regeln: Sie denkt API-Sicherheit (kein Key im Bundle) von Anfang an mit. Wer keine Claude-Integration plant, hat von dieser Regel keinen Nutzen — dafür ist sie zu spezifisch.

Praxis-Tipp

Beispiel: „Erstelle ein Composable useClaudeChat, das Streaming-Antworten der Anthropic API konsumiert“ — die Regel erzwingt dabei serverseitige Key-Verwaltung statt Client-Exposition.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …