Vue.js 3 mit Claude Code: Composition API und Pinia 2026
Vue.js 3 ist das pragmatische Framework für moderne SPAs — Composition API, Pinia, Vue Router und TypeScript-Integration. Claude Code kennt das Vue-Ökosystem vollständig und generiert produktionsreife Komponenten, Composables und State-Management-Lösungen.
Composition API: Moderne Vue-Komponenten
CompositionScript Setup und Reactivity
# Prompt: "Erstelle eine Vue 3 Komponente für eine Produkt-Suchseite
# mit Debounced Search, Pagination und Error Handling"
<!-- ProductSearch.vue — Claude Code generiert: -->
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useProductStore } from '@/stores/product'
import { useDebounceFn } from '@vueuse/core'
const store = useProductStore()
const searchQuery = ref('')
const currentPage = ref(1)
// Debounced Search — 300ms Wartezeit
const debouncedSearch = useDebounceFn(async (query: string) => {
currentPage.value = 1
await store.searchProducts(query, currentPage.value)
}, 300)
watch(searchQuery, debouncedSearch)
const totalPages = computed(() =>
Math.ceil(store.totalCount / store.pageSize)
)
async function goToPage(page: number) {
currentPage.value = page
await store.searchProducts(searchQuery.value, page)
}
</script>
<template>
<div class="product-search">
<input v-model="searchQuery" placeholder="Produkt suchen..." />
<div v-if="store.loading" class="spinner" />
<div v-else-if="store.error">{{ store.error }}</div>
<div v-else>
<ProductCard
v-for="product in store.products"
:key="product.id"
:product="product"
/>
</div>
<Pagination
:current="currentPage"
:total="totalPages"
@change="goToPage"
/>
</div>
</template>
Composables: Wiederverwendbare Logik
ComposableuseAuth und useFetch
# Prompt: "Erstelle Composables für Auth und HTTP-Requests
# mit automatischem Token-Refresh"
// composables/useAuth.ts
export function useAuth() {
const user = ref<User | null>(null)
const isAuthenticated = computed(() => !!user.value)
async function login(email: string, password: string) {
const { data } = await $fetch('/api/auth/login', {
method: 'POST',
body: { email, password }
})
user.value = data.user
localStorage.setItem('token', data.token)
}
async function logout() {
user.value = null
localStorage.removeItem('token')
await navigateTo('/login')
}
return { user, isAuthenticated, login, logout }
}
// composables/useAsyncData.ts — Generisches Fetch-Composable
export function useAsyncData<T>(fetcher: () => Promise<T>) {
const data = ref<T | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)
async function execute() {
loading.value = true
error.value = null
try {
data.value = await fetcher()
} catch (e) {
error.value = e.message
} finally {
loading.value = false
}
}
onMounted(execute)
return { data, loading, error, refresh: execute }
}
Composable-Tipp: "Extrahiere diese Logik in ein wiederverwendbares Composable mit TypeScript-Generics, Error-Handling und Loading-State." Claude Code erstellt testbare, typsichere Composables die in beliebigen Komponenten einsetzbar sind.
Pinia: State Management
PiniaStore mit Actions und Getters
# Prompt: "Erstelle Pinia Store für den Warenkorb mit Persistence"
// stores/cart.ts
export const useCartStore = defineStore('cart', () => {
// State
const items = ref<CartItem[]>([])
// Getters
const total = computed(() =>
items.value.reduce((sum, item) =>
sum + item.price * item.quantity, 0)
)
const itemCount = computed(() =>
items.value.reduce((sum, item) => sum + item.quantity, 0)
)
// Actions
function addItem(product: Product, qty = 1) {
const existing = items.value.find(i => i.id === product.id)
if (existing) {
existing.quantity += qty
} else {
items.value.push({ ...product, quantity: qty })
}
}
function removeItem(id: string) {
items.value = items.value.filter(i => i.id !== id)
}
function clearCart() { items.value = [] }
return { items, total, itemCount, addItem, removeItem, clearCart }
}, {
persist: true // pinia-plugin-persistedstate
})
Vue Router: Navigation und Guards
RouterTyped Routes und Navigation Guards
// router/index.ts — Claude Code mit Auth Guards:
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: HomeView },
{
path: '/dashboard',
component: DashboardView,
meta: { requiresAuth: true },
children: [
{ path: 'products', component: ProductsView },
{ path: 'settings', component: SettingsView }
]
},
{ path: '/login', component: LoginView }
]
})
// Navigation Guard — Auth Check
router.beforeEach(async (to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isAuthenticated) {
return { path: '/login', query: { redirect: to.fullPath } }
}
})
// Typed Route Helper (Vue Router 4.4+)
const route = useRoute()
const productId = route.params.id // TypeScript kennt den Typ
VueUse: 200+ Composition Utilities
# Prompt: "Nutze VueUse für Scroll-Tracking und lokale Datenspeicherung"
import { useScroll, useStorage, useClipboard, useDark } from '@vueuse/core'
// Scroll-Position tracken
const { y: scrollY } = useScroll(window)
const isScrolled = computed(() => scrollY.value > 80)
// Persistent Local Storage — reaktiv!
const theme = useStorage('user-theme', 'light')
// Clipboard mit Feedback
const { copy, copied } = useClipboard()
// copied.value = true für 1,5 Sek nach copy()
// Dark Mode Toggle
const isDark = useDark()
const toggleDark = useToggle(isDark)
Vue.js-Modul im Kurs
Im Claude Code Mastery Kurs: vollständiges Vue.js 3 Modul mit Composition API, Pinia, Vue Router, VueUse und TypeScript — von der ersten Komponente bis zur produktionsreifen SPA.
14 Tage kostenlos testen →