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

Adres: https://agentvera.dev/blog/claude-code-ile-vue/ · Yayın: 2026-11-01

Claude Code’u Vue.js projelerinde Composition API, Pinia ve Vite ile kullanmayı öğrenin: CLAUDE.md ayarları, örnek komutlar ve test doğrulama ipuçları.

**Kısaca:**

- Claude Code, Vue.js SFC’lerini Composition API ve Pinia ile okuyup düzenleyebilir; CLAUDE.md ile proje kurallarını öğrenir.
- Doğru çalışma döngüsü küçük adımlarla plan yapıp her değişiklikten sonra Vitest ve lint komutlarını çalıştırmaktır.
- Birden fazla ajanı git worktree ve otomatik kod incelemesiyle aynı projede çakışmadan çalıştırabilirsiniz.

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](/blog/claude-code-nasil-kullanilir/) 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:

| Dosya / klasör | Görevi |
| --- | --- |
| src/components/ | Tekrar kullanılabilir Vue bileşenleri |
| src/views/ | Router ile eşlenen sayfa bileşenleri |
| src/stores/ | Pinia store tanımları |
| src/composables/ | Composition API ile paylaşılan reaktif mantık |
| CLAUDE.md | Ajanın okuduğu proje kuralları ve komutlar |

## Ç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](/blog/claude-code-plan-modu/) 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](/blog/claude-code-en-iyi-pratikler/) 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](/blog/birden-fazla-claude-code-ajani/) 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.

## Sık sorulanlar

**Claude Code Vue.js projesinde ne işe yarar?** Claude Code, Vue.js projelerinde SFC bileşenlerini düzenleyebilir, Composition API’ye uygun kod üretebilir, Pinia store’larını yönetebilir ve Vitest testlerini çalıştırıp hataları düzeltebilir. Terminalde proje klasöründe claude komutuyla başlar.

**Claude Code’u Vue.js projesine nasıl bağlarım?** Proje köküne CLAUDE.md dosyası ekleyip build, test, lint komutlarını ve Vue.js kurallarını yazın. Ardından terminalde proje klasöründe claude yazıp isteklerinizi iletin.

**Claude Code Vue.js testlerini çalıştırabilir mi?** Evet, CLAUDE.md’de tanımlı pnpm test:unit gibi komutları çalıştırabilir; Vitest çıktısını okuyup başarısız testleri düzeltebilir. Siz de pnpm test:unit ile doğrulama yapabilirsiniz.

**Claude Code ile birden fazla ajanı aynı Vue.js projesinde çalıştırabilir miyim?** Evet, AgentVera gibi araçlarla her ajanı kendi git worktree’sinde çalıştırarak çakışmaları önleyebilir, otomatik kod incelemesi ve kontrol noktalarıyla süreci yönetebilirsiniz.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/