Vue 3 Nuxt 3 TypeScript

Cursor-Regel für Vue 3/Nuxt 3 mit TypeScript — ergänzt die Standard-Konventionen um strikte Typisierung.

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

Die Regel

---
description: "Cursor rules for Vue 3 development with TypeScript integration."
globs: **/*
alwaysApply: false
---
Vue 3 Nuxt 3 TypeScript Guidelines

- Use Vue 3 Composition API patterns with `<script setup>` and clear component boundaries.
- Prefer TypeScript interfaces for object shapes and keep shared types close to the feature that owns them.
- Use Nuxt conventions for routing, layouts, composables, plugins, server routes, and runtime config.
- Keep Tailwind CSS usage responsive, accessible, and consistent with the project design system.
- Use VueUse utilities where they simplify reactivity without hiding important state transitions.
- Optimize Vite/Nuxt builds with lazy loading, dynamic imports, image optimization, and bundle review.

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 erweitert die Vue-3/Nuxt-3-Konventionen um TypeScript-Vorgaben: typisierte Props und Emits, korrekte Typisierung von Composables und Store-State, Vermeidung von any. Damit generiert die KI nicht nur idiomatischen Nuxt-Code, sondern auch typsicheren Code, was in größeren Projekten Laufzeitfehler früh abfängt. Relevant für Teams, die Vue 3/Nuxt 3 strikt typisiert einsetzen und keinen Mischstil aus JS- und TS-Mustern wollen. In .cursor/rules ablegen; ergänzt sich gut mit einer allgemeinen Vue/Nuxt-Regel, falls beide parallel im Projekt liegen sollen.

Praxis-Tipp

Kombiniere sie mit strikten tsconfig-Einstellungen (strict: true), damit von Cursor generierter Code auch sauber durchkompiliert.

Siehe auch

• Angular TypeScript

Lizenz & Quelle

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

Lade …