Claude Code ile Vue.js Projelerinde Verimli Çalışma

Claude Code’u Vue.js projelerinde kullanmak için proje klasöründe terminalden claude komutunu başlatmanız yeterlidir; ajan dosya sistemini, package.json’u ve CLAUDE.md dosyasını okuyup bağlamı anlar. Bu rehberde Composition API, SFC, Pinia ve Vite tabanlı bir Vue.js projesinde Claude Code ile nasıl verimli çalışacağınızı, hangi kuralları CLAUDE.md’ye yazacağınızı ve nelere dikkat etmeniz gerektiğini somut örneklerle anlatıyorum.

Claude Code neden Vue.js çalışmalarına uygun?

Claude Code, Vue.js’in tek dosyalı bileşen yapısını iyi anlar; <script setup>, <template> ve <style scoped> bloklarını ayrı ayrı düzenleyebilir. Composition API’nin ref, reactive, computed, watch kavramlarını bilir; yeni bir composable oluştururken useRouter ve useStore gibi yerleşik hook’ları doğru bağlayabilir. Pinia store dosyalarını okuyup yeni action ve getter ekleyebilir, defineStore seçeneklerini projedeki mevcut desenlere göre güncelleyebilir. Ayrıca Vite projelerinde pnpm dev, pnpm build, pnpm test:unit gibi komutları çalıştırıp çıktıları yorumlayabildiği için hata düzeltme döngüsü kısalır. Başlangıç komutları ve genel kullanım için Claude Code nasıl kullanılır? Başlangıç rehberi sayfasına bakabilirsiniz.

Projeyi ajan için hazırlama

Claude Code, proje kökündeki CLAUDE.md dosyasını her turda okur; bu yüzden Vue.js’e özgü kuralları buraya yazmak ajanın doğru karar vermesini sağlar. Dosyada komutlar, klasör yapısı ve çerçeve kuralları net olmalıdır. Aşağıdaki örnek, pnpm kullanan tipik bir Vite + Vue 3 projesi için kısa ama yeterli bir CLAUDE.md içeriğidir:

# CLAUDE.md

## Komutlar
- Geliştirme sunucusu: pnpm dev
- Derleme: pnpm build
- Birim testleri: pnpm test:unit (Vitest)
- Lint: pnpm lint
- Tip kontrolü: pnpm type-check

## Klasör yapısı
- src/components/ : yeniden kullanılabilir bileşenler (PascalCase dosya adı)
- src/views/ : sayfa bileşenleri (router target)
- src/stores/ : Pinia store'ları (kebab-case dosya adı)
- src/composables/ : Composition API composable fonksiyonları

## Vue.js kuralları
- SFC'lerde her zaman `<script setup lang="ts">` kullan.
- Composition API'yi tercih et; Options API yazma.
- `defineProps` ve `defineEmits` içinde tip belirt; `withDefaults` kullan.
- Pinia store'larında state doğrudan değiştirilmez; mutations yerine actions üzerinden değişiklik yapılır.
- Vite alias'ı `@/` ile `src/` klasörüne eriş.
- Bileşen testlerinde `@vue/test-utils` ile mount edin; `data-testid` özniteliği kullanın.
- Stil bloklarını scoped tutun; global stiller yalnızca `src/assets/` altında olsun.

Bu kurallar ajanın yanlış alışkanlıklar edinmesini engeller; örneğin Options API üretmesini veya store state’ini doğrudan değiştirmesini önler. defineProps ve defineEmits içinde tip belirtilmesi, pnpm type-check komutunun anlamlı hata üretmesini sağlar. data-testid kullanımı testlerin DOM yapısına bağımlılığını azaltır ve ajan testleri daha kararlı yazar. Aşağıdaki tablo, ajanın sık dokunacağı dosya ve klasörleri özetler:

Çalışma döngüsü ve örnek istekler

Verimli bir döngü beş adımdan oluşur: önce görevi küçük parçalara bölün, ardından ajanı tek bir değişiklik için yönlendirin, sonra pnpm test:unit çalıştırıp çıktıyı inceleyin, değişikliği diff ile gözden geçirin ve en son commit edin. Planlama aşamasını daha disiplinli yapmak için Claude Code plan modu: önce planla, sonra yaptır sayfasındaki yaklaşımı uygulayabilirsiniz. Aşağıdaki istekler, Vue.js projelerinde sık karşılaşılan görevler için iyi başlangıç noktalarıdır:

• “Mevcut UserCard.vue bileşenini incele, Options API kullanıyorsa Composition API’ye geçir ve useUserStore Pinia store’una bağla. Değişiklikten sonra pnpm test:unit çalıştırıp geçene kadar düzelt.”
• “Yeni bir ProductList.vue bileşeni oluştur: products store’dan listeyi çek, v-for ile render et, yükleme ve hata durumları için ayrı bloklar göster. ProductList.spec.ts testini de yaz.”
• “vite.config.ts içindeki @ alias’ının tanımını kontrol et, eksikse resolve.alias ile ekle ve bileşenlerdeki göreli importları @/ alias’ına çevir.”
• “Pinia’daki cart store’una removeItem action’ı ekle; CartItem.vue içindeki silme butonunu bu action’a bağla ve pnpm test:unit ile testleri doğrula.”
• “Vitest’te şu anda başarısız olan UserCard testlerini çalıştır, hatanın kaynağını bul ve kodu veya testi düzelt; sonra tüm birim testlerin geçtiğini pnpm test:unit çıktısıyla göster.”

Bu tür istekleri verirken ajanın yalnızca istenilen dosyaya dokunmasını ve değişiklik sonrası test komutunu kendiliğinden çalıştırmasını bekleyin. Çıktıda hata varsa ajan hatanın satır numarasını kullanarak ilgili bileşeni veya testi düzeltebilir. İlk çalıştırmada beklenmedik bir değişiklik görürseniz git diff ile hangi satırların değiştiğini ayrıntılı inceleyin.

Tipik Vue.js görevleri ve dikkat edilmesi gerekenler

Claude Code, Vue.js projelerinde şu işleri güvenilir biçimde yapar: SFC düzenleme, Options API’den Composition API’ye geçiş, composable fonksiyonları çıkarma, Pinia store action/getter ekleme, Vitest ve Vue Test Utils ile bileşen testi yazma, defineProps / defineEmits tip tanımlarını tamamlama. Ajan ayrıca v-for listelerinde :key kullanımı, v-if / v-show ayrımı ve olay işleyicilerinde @ kısaltmaları gibi şablon sözdizimine hakimdir.

Ancak ajanın çıktısını her zaman dikkatle incelemek gerekir; Vue.js’e özgü bazı tuzaklar vardır:

• Reaktivite kaybı: props veya store state’ini doğrudan destructuring ile alırsa toRefs kullanmaz; ajan bazen bu hatayı yapabilir. Özellikle const { items } = store gibi bir kod, items’in reaktif bağlantısını koparır.
• ref ile reactive arasındaki seçim: ajan yanlış tip seçerse şablon güncellemeleri beklendiği gibi çalışmayabilir. Örneğin bir dizi state için reactive([]) yerine ref([]) kullanmak daha doğaldır.
• v-model bileşen sözleşmesi: özel bileşenlerde modelValue ve update:modelValue adlarını kullanması gerekir; ajan eski Vue 2 alışkanlıklarına dönebilir. defineModel kullanılabilir ancak projenin Vue sürümüne bağlıdır.
• Scoped stil kapsamı: <style scoped> alt bileşenlere etki etmez; ajan bazen yanlış varsayımla stil ekleyebilir. Derin seçiciler :deep() kullanımını da gözden geçirin.
• Tip kontrolü: SFC şablonlarındaki tip hataları yalnızca vue-tsc ile yakalanır; ajan pnpm type-check çalıştırmayı unutabilir. pnpm build da tip kontrolü içeriyorsa bu eksiklik fark edilmeyebilir.
• Vite yapılandırması: alias, plugin veya optimizeDeps değişiklikleri yan etki yapabilir; ajan yalnızca build’in geçmesine odaklanıp çalışma zamanı hatalarını gözden kaçırabilir. Özellikle resolve.alias eklerken tsconfig.json ile eşleşme gerekir.

Bu yüzden her turda diff’i gözden geçirin, testleri kendiniz de çalıştırın ve ajanın önerdiği değişikliğin gerçek davranışı bozmadığından emin olun.

Vue.js için test ve doğrulama

Claude Code, test ve doğrulama döngüsünü hızlandırır; ancak komutları ajanın çalıştırmasını açıkça istemelisiniz. Her değişiklikten sonra şu üç komutu çalıştırıp çıktıları birlikte yorumlatın: pnpm test:unit (Vitest), pnpm lint ve pnpm type-check. Bileşen testlerinde @vue/test-utils ile mount edip data-testid kullanmak, ajanın testleri daha kararlı yazmasını sağlar. Ajan, Vitest çıktısındaki hata satırlarını okuyup ilgili bileşeni veya testi düzeltebilir. Ayrıca pnpm build ile üretim derlemesini çalıştırmak, yalnızca testlerin geçmediği durumları da ortaya çıkarır. Pinia store testlerinde createTestingPinia kullanarak her test için taze store oluşturabilirsiniz; ajan bu kalıbı tanıyıp uygulayabilir. Doğrulama tamamlanmadan commit atmayın; ajanın değiştirdiği dosyaları git diff ile inceleyin. Ayrıca Claude Code en iyi pratikler: uygulamalı kontrol listesi sayfasındaki kontrol listesi de işinize yarar.

Aynı Vue.js projesinde birden fazla ajanı AgentVera ile çalıştırma

AgentVera, Claude Code dahil farklı ajanların gerçek komut satırı araçlarını tek pencerede yan yana çalıştırır. Vue.js projelerinde bir ajan src/stores/ üzerinde çalışırken diğeri src/components/ içindeki bileşenleri düzenleyebilir; her ajan kendi git worktree’sinde çalıştığı için dosyalar üzerine yazılmaz. Bir ajanın turu bittiğinde ikinci model otomatik kod incelemesi yapar ve bulgular dosya:satır olarak işaretlenir. Kontrol noktaları sayesinde hatalı bir değişiklik tek tıkla geri alınabilir; bu, reaktivite ve test hatalarını yakalamak için değerlidir. Birden fazla ajanı paralel çalıştırmanın incelikleri için Birden fazla Claude Code ajanını paralel çalıştırma sayfasına göz atabilirsiniz.

Sonuç

Claude Code, Vue.js projelerinde SFC düzenleme, Composition API refactoring, Pinia store yönetimi ve test yazımı için güçlü bir yardımcıdır. CLAUDE.md ile net kurallar koyup küçük adımlarla ilerler ve her değişikliği testlerle doğrularsanız, ajanın çıktısı güvenilir hale gelir. Birden fazla ajanı paralel çalıştırmak gerektiğinde AgentVera’nın worktree ve kod inceleme özellikleri işleri hızlandırır.