# Gemini CLI ile Vue.js Projelerinde Verimli Çalışma

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

Gemini CLI’yı Vue.js projelerinde güvenle kullanmak için kurulum, GEMINI.md, test ve paralel ajan ipuçları. Composition API, Pinia ve Vite odaklı pratik rehber.

**Kısaca:**

- Gemini CLI, Vue.js SFC’lerinde bileşen, store ve test değişikliklerini proje kurallarına uygun şekilde yapar.
- GEMINI.md dosyasına Vite, Vitest, ESLint komutları ve klasör yapısı yazıldığında ajan daha az hata üretir.
- Küçük adımlar, test çalıştırma ve diff inceleme döngüsü ile Vue.js projelerinde güvenli kod üretimi sağlanır.

Gemini CLI, Vue.js projelerinde terminalden çalışan bir kodlama ajanıdır: dosya okur, düzenler, `npm` komutlarını çalıştırır ve test çıktılarına göre düzeltme yapar. Proje kökündeki GEMINI.md dosyası ajanın Vue.js kararlarınızı öğrenmesini sağlar. Bu rehberde Composition API, SFC, Pinia, Vite ve Vitest odaklı pratik bir çalışma düzeni anlatıyorum. Genel kurulum ve temel kullanım için [Gemini CLI](/ajanlar/gemini-cli/) sayfasına bakabilirsiniz.

## Neden Gemini CLI Vue.js işlerine uygun

Vue.js projelerinde ajanın değeri, tek dosyalı bileşenlerin (SFC) bağlamını korumasından gelir. `template`, `script setup` ve `style scoped` blokları arasında gezinirken prop adlarını, emit tanımlarını ve reaktif değişkenleri birlikte değerlendirir. Böylece `ProductList.vue` içinde `products` dizisini dolaşırken aynı dosyada tanımlı `defineProps` ile uyumu kontrol eder. Pinia store’ları ve composable’lar arası bağımlılıkları da görebildiği için `useCartStore` içindeki bir action’ın bileşenlerde nasıl çağrıldığını izler. Vite dev server hatalarını veya Vitest çıktısını okuduğunda sorunu dosya satırına kadar indirger; bu, hızlı geri bildirim sağlar. Ayrıca büyük refactor’lar yerine küçük adımlar önerir; bu da Vue reactivity kurallarına uyumu kolaylaştırır. Örneğin, bir bileşende `reactive` nesneyi destructure edip reaktiviteyi bozan bir değişiklik yaptığınızda ajan, test çıktısındaki `undefined` hatasını görüp `toRefs` kullanımını önerebilir. Benzer şekilde, `defineEmits` dizisini unuttuğunuz bir child bileşende emit çağrısının çalışmadığını fark edip düzeltme yapar. Bu sayede Vue.js’in ince ayrıntılarında hızlı ve doğru müdahale sağlar.

## Projeyi ajan için hazırlama

Ajanın Vue.js projenizde doğru çalışması için kök dizine kısa bir GEMINI.md dosyası ekleyin. Bu dosya, ajanın her turda okuyacağı proje bağlamıdır; komutlar, klasör yapısı ve Vue.js’e özgü kurallar içerir. İşte gerçekçi bir örnek:

```
# Vue 3 + Vite + Pinia projesi

## Komutlar
- Geliştirme: `npm run dev`
- Build: `npm run build`
- Test: `npm run test:unit`
- Lint: `npm run lint`

## Klasör yapısı
- `src/components/` ortak bileşenler, PascalCase dosya adı
- `src/views/` sayfa bileşenleri, route başına bir dosya
- `src/stores/` Pinia store'ları, her store ayrı dosya
- `src/composables/` yeniden kullanılabilir composable'lar

## Vue.js kuralları
- Composition API zorunlu; `<script setup>` kullan.
- SFC sırası: template, script, style scoped.
- Prop ve emit tanımlarını TypeScript ile yaz.
- Reaktif state için `ref` veya `reactive`; store dışında global state kullanma.
- Test dosyaları `src/**/__tests__/*.spec.ts` altında olsun.
- Değişiklik sonrası `npm run test:unit` ve `npm run lint` çalıştır, hata varsa düzelt.
```

Bu dosyayı başlangıç noktası olarak kullanın; projeye özel ek kuralları (örneğin `vue-router` kullanımı veya `vuetify` bileşen kuralları) ekleyebilirsiniz. Ajan, GEMINI.md’yi her komuttan önce okur ve bu bağlamı korur. Örneğin, `<script setup>` zorunluluğu sayesinde ajan Options API çözümleri önermez; test dosyası konumu sayesinde yeni testleri doğru klasöre koyar. Ayrıca `npm run lint` komutunu bildiği için stil hatalarını sormadan düzeltir. Daha ayrıntılı kullanım için [Gemini CLI nasıl kullanılır? Adım adım rehber](/blog/gemini-cli-nasil-kullanilir/) yazısına göz atın.

## Çalışma döngüsü

Güvenli bir döngü şöyle kurulur: önce ajanla planı netleştirin, sonra tek bir küçük görevi verin. Ajan kod yazar, testleri ve lint’i çalıştırır, sonra `git diff` ile değişikliği inceleyin. Beklenmedik bir reactivity hatası varsa geri alıp daha küçük adım isteyin. Aşağıdaki promptlar tipik Vue.js görevleri için başlangıç noktasıdır:

- "Mevcut `ProductCard.vue` bileşenini incele ve Pinia’daki `useCartStore` içine `addToCart(product)` metodunu ekle; bileşende bu metodu tetikleyen bir buton oluştur. Değişiklik sonrası ilgili testleri çalıştır."
- "`LoginForm.vue` içinde form doğrulamasını Composition API ile yaz; `email` ve `password` alanları için hata mesajlarını `reactive` bir nesnede tut. `submit` fonksiyonu geçersizse hataları göstersin."
- "`UserList.vue` için Vitest ile mount testi yaz; API çağrısını `vi.mock` ile mockla ve kullanıcı listesinin render edildiğini doğrula. Test dosyasını `__tests__/UserList.spec.ts` altına koy."
- "Pinia’da yeni bir `useAuthStore` oluştur; `isLoggedIn`, `token` state’leri ile `login` ve `logout` action’larını ekle. Mevcut testleri çalıştırıp geçtiğinden emin ol."
- "Vite build sırasında çıkan `'X' is not exported` hatasını çöz ve `npm run lint` çıktısındaki tüm uyarıları temizle."
- "`useFetchData` adında bir composable oluştur; `ref` ile `data`, `error` ve `loading` state’lerini yönet, `onMounted` içinde fetch çağrısı yap ve hata durumunda `error` döndür. Bir bileşende bu composable’ı kullan."

Her promptta ajanın önce planı özetlemesini isteyebilirsiniz; böylece yanlış dosyaya müdahale riski azalır. Diff incelemesinde özellikle `.vue` dosyalarındaki değişikliklere bakın: template içindeki yanlış direktif kullanımı, script setup bloğundaki importların eksikliği veya style scoped’ta gereksiz global stil kalıntıları olabilir. `git diff --check` ile boşluk hatalarını da yakalayabilirsiniz. Prompt yazımıyla ilgili daha fazla teknik için [Kodlama ajanları için prompt nasıl yazılır?](/blog/kodlama-ajanlari-icin-prompt-yazmak/) sayfasına bakın.

## Tipik Vue.js görevleri ve dikkat edilmesi gerekenler

Gemini CLI, şu görevlerde genellikle iyi sonuç verir: yeni SFC oluşturma, prop ve emit tanımlarını TypeScript ile tamamlama, Options API’den Composition API’ye dönüştürme, Pinia store taslağı çıkarma, Vitest testleri yazma ve template içindeki binding hatalarını düzeltme. Ancak Vue.js’e özgü birkaç tuzakta dikkatli olun.

- Reactivity kaybı: Ajan `reactive` bir nesneyi destructure ederek kullanabilir; bu, reaktiviteyi öldürür. Böyle bir değişiklikte `toRefs` kullanmasını veya nesneyi bütün olarak tutmasını açıkça isteyin. Örneğin `const { name } = user` yerine `const name = computed(() => user.name)` tercih edilmelidir.
- Prop mutasyonu: Ajan bazen child bileşende prop’a doğrudan atama yapabilir. Bunu yakalarsanız, değişikliği `emit` veya computed getter/setter ile yeniden yazdırın. Vue devtools veya konsol uyarısı genellikle bunu işaret eder.
- Aşırı mühendislik: Küçük bir form için gereksiz composable veya store katmanı önerebilir. Kod incelemesinde sadeleştirme isteyin; özellikle tek kullanımlık bir state için Pinia store oluşturmasını engelleyin.
- Yanlış test stratejisi: Shallow mount kullanarak child bileşenlerin entegrasyonunu gözden kaçırabilir. Kritik akışlarda tam mount veya `mount` tercih edin. Ajan bazen yalnızca snapshot testi yazıp davranışı doğrulamadan geçebilir; her testin gerçek kullanıcı etkileşimini kapsamasını isteyin.
- Yaşam döngüsü: Async işlemlerde `onMounted` içinde başlatılan abonelikleri temizlemeyi unutabilir; bunu kontrol edin. Özellikle `setInterval` veya WebSocket bağlantısı kullanılan bileşenlerde `onUnmounted` temizliği şarttır.
- Tip güvenliği: `defineProps` ve `defineEmits` için TypeScript tip tanımı eklemek yerine basit array syntax’i kullanabilir. Bu, IDE ve derleyici uyarılarına yol açar; ajanın tip tanımını zorunlu kılmasını sağlayın.

## Vue.js için test ve doğrulama

Ajanın en büyük avantajı, test ve lint komutlarını sizin için çalıştırıp çıktıyı okuyabilmesidir. Her önemli değişiklikten sonra aşağıdaki komutları çalıştırmasını isteyin:

| Komut | Ne zaman kullanılır | Ajanın beklenen davranışı |
| --- | --- | --- |
| `npm run test:unit` | Bileşen veya store değişikliğinden sonra | Test hatalarını satır satır okuyup düzeltme önerir |
| `npm run lint` | Yeni dosya ekledikten sonra | ESLint hatalarını ve uyarılarını giderir |
| `npm run build` | Büyük refactor veya tip değişikliği sonrası | TypeScript ve Vite hatalarını kontrol edip çözer |

Testleri ajanın çalıştırmasına izin verin, ancak nihai kararı siz verin. `git diff` çıktısını incelemeden merge etmeyin. Özellikle Pinia store’larda testlerin gerçek state değişimlerini doğruladığından emin olun; ajan bazen mock’ları aşırı kullanıp gerçek davranışı test etmeyebilir. Yeni bir test yazarken ajanın `@vue/test-utils` ile `await flushPromises()` çağırmasını isteyin; böylece asenkron state güncellemeleri tamamlanır. Ayrıca kapsam raporu (`npm run test:unit -- --coverage`) çalıştırıp kritik bileşenlerin şube kapsamını kontrol edebilirsiniz.

## Birkaç ajanı aynı Vue.js projesinde çalıştırma

Birden fazla Gemini CLI ajanını aynı Vue.js projesinde çalıştırırken AgentVera işleri kolaylaştırır. Her ajan kendi git worktree’sinde çalıştığı için aynı bileşenleri ezmez; paralel görevler güvenle ilerler. Bir ajanın sırası bittiğinde ikinci model otomatik kod incelemesi yapar ve bulguları file:line ile gösterir; böylece `ref`/`reactive` hatalarını erkenden yakalarsınız. Her turun checkpoint’i tek tıkla geri alınabilir, token bütçeleri ise maliyeti kontrol altında tutar. Bu paralel çalışma düzenini [Windows’ta kodlama ajanlarını yönetmek: paralel ajanlar](/blog/windowsta-kodlama-ajanlari/) yazısında da görebilirsiniz.

## Sonuç

Gemini CLI, Vue.js projelerinde düzenli bir GEMINI.md ve disiplinli test döngüsü ile güvenilir bir yardımcı haline gelir. Büyük refactor’lar yerine küçük adımlar, `git diff` incelemesi ve ajanın çalıştırdığı testler projenin sağlıklı kalmasını sağlar. Vue.js’e özgü reactivity ve prop kurallarını ajanla açıkça paylaştığınızda hata oranı düşer. Özellikle Composition API ve Pinia store’larda ajanın önerilerini her zaman kendi proje bağlamınızla doğrulayın. Paralel işler için AgentVera gibi bir düzenleyici, aynı anda birden çok ajanı yönetmenizi kolaylaştırır ve kod incelemesi adımını otomatikleştirir. Unutmayın: ajan bir araçtır; nihai kontrol sizdedir.

## Sık sorulanlar

**Gemini CLI Vue.js projesinde nasıl başlatılır?** Proje klasöründe terminalde gemini komutunu çalıştırıp sohbete başlarsınız. Ajan, GEMINI.md ve package.json dosyalarını okuyarak bağlamı öğrenir; komutları sizin yerinize çalıştırabilir.

**Gemini CLI ile Vue bileşeni oluştururken hangi komutları kullanmalıyım?** Yeni bir bileşen için ajanın npm run test:unit ve npm run lint komutlarını çalıştırmasını isteyin. Çıkan hataları düzeltmesini ve değişiklikleri git diff ile göstermesini sağlayın.

**GEMINI.md dosyasında Vue.js için neler olmalı?** Build, test, lint komutları; klasör yapısı; Composition API ve <script setup> zorunluluğu; Pinia store kuralları; SFC sıralaması gibi proje kararları yer almalıdır. Bu bağlam, ajanın tutarlı ve projeye uygun kod üretmesini sağlar.

**Gemini CLI çoklu ajanla Vue.js projesinde paralel çalışabilir mi?** Evet, her ajan kendi git worktree’sinde çalıştırılabilir; böylece aynı dosyaları ezmeden paralel görevler yürütülür. Değişiklikler daha sonra ana dalda birleştirilir.

---

**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/