Vue 3 Nuxt 3 TypeScript

Nuxt-3-Cursor-Regel mit zusätzlicher strikter TypeScript-Typisierung für Props, Emits und Composables.

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

Baut auf den Standard-Nuxt-3-Konventionen auf, verschärft sie aber um strikte TypeScript-Typisierung: typisierte Props und Emits über defineProps()/defineEmits(), Interfaces für API-Antworten und typsichere Composables statt any-Fallbacks. Relevant für Teams, die bereits strict-mode in tsconfig fahren und wollen, dass KI-generierter Code diese Disziplin nicht unterläuft. Der Mehrwert gegenüber der reinen JavaScript-Variante liegt darin, dass Typfehler schon beim Schreiben statt erst zur Laufzeit auffallen. Wer kein TypeScript im Projekt nutzt, sollte stattdessen die einfachere Nuxt-3-Regel wählen, da sonst unnötige Typannotationen erzwungen werden.

Praxis-Tipp

Nutzen Sie sie zusammen mit strict: true in der tsconfig.json, damit z. B. „Composable useUser mit typisiertem Rückgabewert“ tatsächlich vollständig typisiert generiert wird.

Lizenz & Quelle

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

Lade …