Vue3 Composition API

Cursor-Regel, die Vue-3-Code strikt im Composition-API-Stil mit script setup erzeugt.

Original-Beschreibung der Autoren: Cursor rules for Vue 3 development with Composition API integration.

Die Regel

---
description: "Cursor rules for Vue 3 development with Composition API integration."
globs: **/*
alwaysApply: false
---
// Vue 3 Composition API .cursorrules

// Vue 3 Composition API best practices

const vue3CompositionApiBestPractices = [
  "Use setup() function for component logic",
  "Utilize ref and reactive for reactive state",
  "Implement computed properties with computed()",
  "Use watch and watchEffect for side effects",
  "Implement lifecycle hooks with onMounted, onUpdated, etc.",
  "Utilize provide/inject for dependency injection",
];

// Folder structure

const folderStructure = `
src/
  components/
  composables/
  views/
  router/
  store/
  assets/
  App.vue
  main.js
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper props and emits definitions
3. Utilize Vue 3's Teleport component when needed
4. Use Suspense for async components
5. Implement proper error handling
6. Follow Vue 3 style guide and naming conventions
7. Use Vite for fast development and building
`;

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

Erzwingt für jeden Vue-3-Code konsequent die Composition API mit script-setup-Syntax statt der älteren Options API — also ref/reactive/computed statt data()/methods()/computed()-Objekten. Anders als die Nuxt-Varianten ist diese Regel framework-agnostisch für reines Vue 3 gedacht, etwa in Vite-Projekten ohne Nuxt. Sinnvoll für alle, die eine einheitliche, moderne Codebasis wollen und verhindern möchten, dass die KI aus Trainingsdaten heraus in den älteren Options-API-Stil zurückfällt. Wer noch Vue-2-Legacy-Code pflegt oder bewusst die Options API nutzt, profitiert davon nicht und sollte die Regel deaktivieren.

Praxis-Tipp

Beispiel: „Baue eine Komponente ProductCard mit Props für Titel und Preis“ — die Regel sorgt für defineProps im script-setup-Block statt eines props-Objekts.

Lizenz & Quelle

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

Lade …