Claude Code Vue: Vue.js-Projekte schneller entwickeln mit KI-Unterstützung

Vue.js ist seit Jahren eines der beliebtesten JavaScript-Frameworks — und das aus gutem Grund. Es ist zugänglich für Einsteiger, mächtig genug für große Anwendungen, und hat mit Vue 3 und der Composition API einen klaren Modernisierungsschritt gemacht. Was sich weniger gut skaliert: das Schreiben repetitiver Boilerplate-Komponenten, das Migrieren alter Options-API-Code-Basen und das Einrichten von Router und State Management von Grund auf.

Genau hier setzt Claude Code Vue an. Dieser Artikel zeigt, wie du Claude Code konkret im Vue.js-Workflow einsetzt — vom Projekt-Setup über Komponenten und Reaktivität bis zu Vue Router und Pinia.

1. Was ist Vue.js — und was unterscheidet es von React?

Vue.js bezeichnet sich selbst als progressives Framework: Du kannst es als einfaches Script-Tag in eine bestehende HTML-Seite einbinden, oder als vollständiges SPA-Framework mit Build-Pipeline, Router und State Management nutzen. Diese Stufenlosigkeit macht Vue besonders attraktiv für Teams, die schrittweise migrieren oder iterativ wachsen wollen.

Der wichtigste konzeptuelle Unterschied zu React: Vue trennt Template, Logik und Styles klar in sogenannten Single File Components (SFCs, Dateiendung .vue). Eine Komponente besteht aus drei Blöcken — <template>, <script> und <style> — in einer einzigen Datei. Das macht Vue-Komponenten für viele Entwickler intuitiver lesbar als JSX.

Vue bietet zwei API-Stile:

• Options API: Der klassische Stil. Komponentenlogik wird in Objekt-Optionen wie data, methods, computed und mounted organisiert. Gut geeignet für Vue-2-Migrationen und Teams mit klassischem OOP-Hintergrund.
• Composition API: Der moderne Stil seit Vue 3. Logik wird mit Funktionen wie ref, reactive, computed und watch direkt im setup()-Block oder per <script setup> organisiert. Ermöglicht bessere Wiederverwendbarkeit durch Composables.

2. Projekt erstellen mit Vite und Vue

Der empfohlene Einstieg in ein neues Vue-3-Projekt ist npm create vue@latest — der offizielle Vue-Projekt-Scaffolding-Befehl, der intern auf Vite setzt. Vite ist dabei nicht nur ein Build-Tool, sondern auch ein extrem schneller Dev-Server mit nativem ESM-Support und Hot Module Replacement.

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Der Scaffold-Wizard fragt dich nach TypeScript-Support, Vue Router, Pinia, Vitest, ESLint und weiteren Optionen. Claude Code kann dir dabei helfen, die richtige Konfiguration für deinen Use Case zu wählen:

claude "Ich starte ein neues Vue 3 Projekt mit Vite. Welche Optionen
im create vue@latest Dialog empfiehlst du für eine mittelgroße
SPA mit mehreren Seiten und globalem State Management?"

Nach dem Setup liest Claude Code deine vite.config.ts, tsconfig.json und package.json und gibt dir eine kontextbewusste Empfehlung — keine generische Antwort aus dem Nichts.

3. Komponenten: Props, Emits, Slots und defineComponent

Komponenten sind das Herzstück jeder Vue-Anwendung. Mit Claude Code erstellst du komplette, typsichere Komponenten in einem einzigen Prompt:

claude "Erstelle eine wiederverwendbare Vue 3 Komponente BaseButton.vue
mit TypeScript. Props: label (string), variant ('primary'|'secondary'|'ghost'),
disabled (boolean, optional). Emit: click. Scoped styles inklusive."

Claude Code generiert nicht nur den Code — es erklärt auch die Designentscheidungen. Zum Beispiel, warum defineProps mit TypeScript-Generics dem alten Objekt-Stil vorzuziehen ist, oder wann ein Default-Slot gegenüber Named Slots sinnvoller ist.

Props und Emits mit TypeScript

In Vue 3 mit <script setup> definierst du Props und Emits so:

<script setup lang="ts">
const props = defineProps<{
  label: string
  variant?: 'primary' | 'secondary' | 'ghost'
  disabled?: boolean
}>()

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()
</script>

Slots funktionieren im Template direkt über <slot /> für den Default-Slot oder <slot name="header" /> für benannte Slots. Claude Code ergänzt automatisch TypeScript-Typen für Slot-Props, wenn du sie im Prompt beschreibst.

4. Reaktivität: ref, reactive, computed und watch

Das Reaktivitätssystem von Vue 3 ist einer seiner größten Vorteile. Vier Funktionen decken den Großteil der Use Cases ab:

• ref(): Für primitive Werte (String, Number, Boolean). Zugriff im Script über .value, im Template automatisch ausgepackt.
• reactive(): Für Objekte. Direktzugriff ohne .value, aber kein Destructuring ohne toRefs().
• computed(): Gecachte, abgeleitete Werte. Nur neu berechnet, wenn Abhängigkeiten sich ändern.
• watch() / watchEffect(): Seiteneffekte bei Änderungen ausführen — z. B. API-Calls bei Route-Wechseln.

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const searchQuery = ref('')
const products = ref<Product[]>([])

const filteredProducts = computed(() =>
  products.value.filter(p =>
    p.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
)

watch(searchQuery, async (newQuery) => {
  if (newQuery.length > 2) {
    products.value = await fetchProducts(newQuery)
  }
})
</script>

5. Vue Router: Routen, Guards und dynamische Segmente

Vue Router ist die offizielle Routing-Lösung für Vue. Mit Claude Code richtest du eine vollständige Router-Konfiguration inklusive Lazy Loading, Navigation Guards und dynamischen Routen in Minuten ein:

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/views/HomeView.vue')
    },
    {
      path: '/products/:id',
      component: () => import('@/views/ProductView.vue'),
      props: true
    },
    {
      path: '/admin',
      component: () => import('@/views/AdminView.vue'),
      meta: { requiresAuth: true }
    }
  ]
})

// Navigation Guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !useAuthStore().isLoggedIn) {
    return { name: 'login' }
  }
})

Dynamische Routen mit :id übergibst du als Props direkt an die Komponente (props: true). Navigation Guards schützen Routen auf Basis von Auth-State oder anderen Bedingungen. Claude Code generiert dir vollständige Guard-Logik wenn du den Use Case beschreibst — inklusive Redirect-Ziel und Fehlerbehandlung.

6. Pinia State Management: Stores, Actions und Getters

Pinia ist der offizielle State Manager für Vue 3 — schlanker und TypeScript-freundlicher als Vuex. Ein Store in Pinia ist eine einfache Funktion:

// stores/cart.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCartStore = defineStore('cart', () => {
  const items = ref<CartItem[]>([])

  const total = computed(() =>
    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
  )

  function addItem(product: Product) {
    const existing = items.value.find(i => i.id === product.id)
    if (existing) {
      existing.quantity++
    } else {
      items.value.push({ ...product, quantity: 1 })
    }
  }

  async function checkout() {
    await api.createOrder(items.value)
    items.value = []
  }

  return { items, total, addItem, checkout }
})

Claude Code hilft dir dabei, die Store-Struktur sauber zu halten und Logik korrekt zwischen Stores aufzuteilen. Frage zum Beispiel: claude "Ich habe einen zu großen userStore. Wie teile ich Auth-Logik und User-Profil-Logik sinnvoll auf?"

7. Claude Code Vue: Konkrete Tipps für den Alltag

Komponenten generieren

Der schnellste Einstieg: Beschreibe eine Komponente in natürlicher Sprache. Claude Code liest dabei immer zuerst deine bestehenden Komponenten im Projekt, um Stil und Konventionen zu übernehmen — keine fremdartige Komponente, die nicht ins Projekt passt.

claude "Generiere eine DataTable.vue Komponente wie die bestehenden
Tabellen im Projekt. Spalten als Props, Sorting und Pagination eingebaut,
Slot für Custom Cell Renderer."

Options API zu Composition API migrieren

Altlasten in Vue 2 oder frühem Vue 3? Claude Code migriert Options-API-Komponenten zur Composition API — vollständig und mit Erklärungen für jede Entscheidung:

claude "Migriere diese Vue 2 Options-API-Komponente zu Vue 3
Composition API mit script setup und TypeScript. Behalte
das Verhalten exakt, erkläre jede Änderung."

Performance optimieren

Vue 3 bietet mehrere Optimierungsoptionen: v-memo für teure Listen-Renders, defineAsyncComponent für Code-Splitting, shallowRef für große Objekte die keine tiefe Reaktivität brauchen. Claude Code analysiert deine Komponenten und zeigt konkrete Optimierungspotentiale:

claude "Analysiere ProductList.vue auf Performance-Probleme.
Die Liste rendert 500+ Einträge und ist spürbar langsam beim Filtern."

Typische Antwort: Claude Code erkennt, ob die Filter-Berechnung in computed liegt (gut) oder direkt im Template (schlecht), ob jede Karte als eigene Komponente tief reaktiv ist (unnötig), und ob virtuelles Scrolling sinnvoll wäre. Mit Lösungsvorschlag und Code.

Zwei verwandte Artikel die auf diesem Thema aufbauen:

• Claude Code Debugging — Bugs in Vue-Anwendungen systematisch finden und beheben
• Claude Code für Unternehmen — Team-Workflows, Zugangskontrolle und Deployment