Vue Claude Stack

Cursor-Regel für einen Vue-Stack mit Claude-Integration — gibt Konventionen für den Einsatz der Claude-API im Frontend vor.

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 richtet Cursor auf einen Vue-Stack aus, der die Claude-API einbindet: Struktur für API-Calls, Umgang mit Streaming-Antworten, Fehlerbehandlung und State-Management für Chat-/Assistenten-Features. Damit schlägt die KI Code vor, der zum Muster eines Vue-Frontends mit KI-Anbindung passt, statt generischen Fetch-Code ohne Rücksicht auf Streaming oder Rate-Limits zu erzeugen. Sinnvoll für Projekte, die eine Chat-Oberfläche oder ein KI-Feature auf Vue-Basis bauen. In .cursor/rules ablegen; API-Keys gehören dabei wie immer in Umgebungsvariablen, nie in den generierten Code.

Praxis-Tipp

Lass dir damit z.B. eine Chat-Komponente mit Streaming-Antwort generieren — die Regel sorgt dafür, dass Cursor dabei den richtigen Response-Handling-Ansatz wählt.

Siehe auch

• AI Agent Specialist

Lizenz & Quelle

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

Lade …