# Cursor Agent ile Vue.js’te verimli çalışma rehberi

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

Cursor Agent ile Vue.js projelerinde Composition API, Pinia ve Vite kullanırken verimli çalışmak için pratik kurulum, görev döngüsü ve test ipuçları.

**Kısaca:**

- Cursor Agent’ı Vue.js projesinde cursor-agent ile başlatıp AGENTS.md’ye komut ve kural koyarak doğru bağlamı verin.
- Her görevi küçük adımlara bölüp Vitest ve lint ile doğrulayın; ajanın ürettiği diff’i satır satır inceleyin.
- Pinia ve Composition API’de reaktivite kayıplarına karşı kuralları net yazın; paralel ajanlar için git worktree kullanın.

Cursor Agent’ı Vue.js projelerinde kullanmak isteyenler için pratik bir rehber. `cursor-agent` komutunu proje klasöründe çalıştırarak ajana Vue ekosistemine uygun bağlam verirseniz; Composition API, Pinia, Vite ve Vitest ile tutarlı kod üretebilirsiniz. Aşağıda kurulum, çalışma döngüsü, test ve paralel ajan kullanımı anlatılıyor. [Cursor Agent](/ajanlar/cursor-agent/) hakkında temel bilgiler için bağlantıya bakabilirsiniz.

## Cursor Agent Vue.js işleri için neden uygun

Vue.js tek dosyalı bileşenler (SFC) üzerine kuruludur; template, script ve style aynı dosyada bulunur. Cursor Agent bu yapıyı iyi anlar ve bir bileşenin props, emit, slot ve store bağlantılarını birlikte düzenleyebilir. Composition API’nin `ref`, `reactive`, `computed` ve `watch` gibi reaktivite araçlarını bilir; Pinia store’larıyla etkileşimde `storeToRefs` kullanımı gibi Vue’ya özgü ayrıntıları talimat verildiğinde uygular. Ajan, Vite’in hızlı dev sunucusu ve HMR döngüsüne uygun şekilde dosya değişiklikleri önerir; test kodu üretirken Vitest ve Vue Test Utils API’lerini kullanır.

Generic yapay zeka araçlarının aksine proje bağlamını okur ve mevcut bileşen adları, klasör yapısı, komutlar üzerinden karar verir. Bu yüzden Vue.js projesinde kurallar ne kadar net olursa çıktı o kadar az düzeltme gerektirir.

## Projeyi ajan için hazırlamak

Cursor Agent proje kökündeki AGENTS.md veya .cursor/rules dosyasından talimatları okur. Vue.js projesi için bu dosyaya komutları, klasör kurallarını ve Vue’ya özgü kısıtları yazın. AGENTS.md proje genelinde, .cursor/rules ise alt klasör bazında daha ince ayarlar için kullanılabilir. Aşağıdaki örnek kısa ama işlevseldir:

```markdown
# Vue.js proje ajan kuralları

## Komutlar
- dev: npm run dev
- build: npm run build
- test: npm run test:unit
- lint: npm run lint

## Klasör yapısı
- src/components: yeniden kullanılabilir SFC'ler
- src/views: sayfa seviyesi bileşenler
- src/stores: Pinia store tanımları
- src/composables: paylaşılan composition fonksiyonları
- src/__tests__: Vitest birim testleri

## Vue.js kuralları
- Her zaman <script setup> ile Composition API kullan
- Bileşen dosya adları PascalCase.vue olsun
- Prop'ları defineProps ile tiplendir
- Pinia store'undan state alırken storeToRefs kullan, destructure etme
- v-for içinde mutlaka :key kullan
- computed, watch ve watchEffect'i doğru bağımlılıklarla kullan
- Üçüncü taraf kütüphane eklemeden önce sor
```

Bu dosyaya ek olarak `npm run lint` ve `npm run test:unit` çıktılarını ajanın görmesini sağlayın; böylece hataları kendi önerisiyle düzeltebilir. Kural dosyası kısa ve kesin olmalı; gereksiz açıklamalar ajanın dikkatini dağıtır. [Cursor CLI nasıl kullanılır? Adım adım rehber](/blog/cursor-cli-nasil-kullanilir/) bağlantısındaki temel komut akışı da işinize yarar.

## Çalışma döngüsü: planla, küçük adımlar at, test et, diff’i incele

Ajanla çalışırken her görevi tek seferde büyük bir refactor olarak vermeyin. Önce planı netleştirin, ardından ajanın küçük değişiklikler yapmasını isteyin. Her adımdan sonra testleri ve linter’ı çalıştırın, sonra `git diff` ile değişiklikleri satır satır gözden geçirin. Ajanın 'tamam' demesi yeterli değildir; kodun Vue.js kurallarına uyduğunu doğrulayın.

Aşağıdaki örnek komutlar tipik Vue.js görevleri için iyi başlangıç noktalarıdır:

- "Pinia’da kullanıcı oturumu için bir store oluştur; `login`, `logout` action’ları, `isAuthenticated` getter’ı ve ilgili Vitest testlerini yaz."
- "Mevcut `ProductList.vue` bileşenini Composition API’ye çevir; API çağrısını bir composable’a taşı, yükleme ve hata durumlarını `ref` ile yönet."
- "Bir form bileşeninde `v-model` kullanan input’ları `defineModel` ile güncelle; doğrulama hatalarını `computed` ile göster."
- "`UserCard.vue` için Vue Test Utils ile mount testi yaz; prop’ları ve emit olaylarını test et, Pinia store’unu mock’la."
- "Vitest coverage raporuna göre eksik kalan composable testlerini tamamla; her dal için en az bir assertion ekle."

Her görevden sonra ajanın ürettiği testlerin gerçekten çalıştığını görün. Test geçmiyorsa hatayı ajana geri verin; bağlamı koruyarak düzeltmesini isteyin. Ayrıca template içindeki değişiklikleri özellikle inceleyin; çünkü ajan bazen görsel bir değişikliği yanlış bileşene uygulayabilir.

## Vue.js’te ajanın iyi olduğu işler ve dikkat edilecek tuzaklar

Ajan; SFC oluşturma, Pinia store yazma, composable çıkarma, prop/emit tanımlama ve test taslağı hazırlama konularında hızlıdır. Ancak Vue’nun reaktivite modeli ince ayrıntılar içerir. Aşağıdaki tablo sık karşılaşılan durumları özetler:

| Görev | Dikkat edilecek nokta |
|-------|----------------------|
| Pinia store state’ini bileşende kullanma | `storeToRefs` kullanmadan destructure edilirse reaktivite kaybolur |
| `v-for` ile liste render etme | `:key` unutulursa Vue uyarı verir ve DOM güncellemeleri tutarsız olur |
| `reactive` nesne döndürme veya yayma | `toRefs` veya `ref` kullanılmazsa property güncellemeleri tetiklenmez |
| `defineModel` ile iki yönlü binding | Eski `modelValue` + `update:modelValue` emit yaklaşımına dönebilir; kuralda netleştirin |
| Async component veya Suspense | Ajan yükleme durumunu unutabilir; testlerde `flushPromises` gerekebilir |

Ajanın en sık düştüğü tuzak, kodun çalıştığını test etmeden söylemesidir. Vue projelerinde özellikle reaktivite hataları ancak çalışma zamanında veya testlerde ortaya çıkar. Bu yüzden ajanın önerdiği her değişiklikten sonra ilgili bileşenin mount testini çalıştırın. Ayrıca ajan, yeni bir bileşeni kullanırken import yolunu yanlış yazabilir veya Pinia store’unu main.ts’e kaydetmeyi unutabilir; bu noktaları mutlaka kontrol edin.

## Test ve doğrulama: ajanla birlikte Vitest kullanımı

Vue.js projesinde asıl güvence testlerdir. Ajanın ürettiği kodu doğrulamak için `npm run test:unit` komutunu her küçük adımdan sonra çalıştırın. Testleri ajanın yazmasını isteyin ama çalıştırmayı siz kontrol edin; böylece ajanın test çıktısını okumasını ve hataları düzeltmesini sağlayabilirsiniz. Örneğin önce başarısız bir test yazdırın, sonra implementasyonu yaptırın; bu TDD döngüsü Vue’da ajanın amacını netleştirir.

Vitest’in `--coverage` parametresiyle eksik dalları görebilirsiniz; ajan bu rapora göre ek testler önerebilir. Linter (`npm run lint`) ve build (`npm run build`) komutları da tip hatalarını ve SFC derleme sorunlarını yakalar. Ajanın değiştirdiği dosyaların import yollarını, Pinia store kayıtlarını ve global component tanımlarını ayrıca kontrol edin; çünkü ajan bazen yeni bir dosyayı mevcut yapıya bağlamayı unutabilir. Test yazarken `@vue/test-utils` içindeki `mount`, `flushPromises` ve `createTestingPinia` gibi yardımcıları kullanmasını net biçimde isteyin.

## Paralel ajanlar: AgentVera ile tek Vue.js projesinde çoklu çalışma

AgentVera masaüstü uygulaması, Cursor Agent dahil birden çok kodlama ajanını aynı pencerede kendi gerçek terminal panellerinde çalıştırır. Vue.js projesinde paralel ajan kullanırken en kritik avantaj, her ajanın kendi git worktree’sinde çalışabilmesidir; böylece biri Pinia store’u güncellerken diğeri aynı dosyayı ezmez. Ajanın turu bitince ikinci bir model kodu otomatik inceler ve bulguları file:line olarak gösterir; bu inceleme reaktivite hatalarını yakalar. Ayrıca her turun anlık görüntüsü (checkpoint) alınır; hatalı bir değişiklik tek tıkla geri alınabilir ve oturum adım adım tekrar oynatılabilir. Token bütçeleri ise günlük maliyeti kontrol altında tutar. [Paralel kodlama ajanları için en iyi araçlar](/blog/paralel-yapay-zeka-kodlama-ajani-araclari/) bağlantısında bu tür araçların karşılaştırması bulunur.

## Kapanış

Cursor Agent, Vue.js projelerinde doğru kurallar ve sıkı test döngüsüyle ciddi zaman kazandırır. Ajanın ürettiği kodu her zaman inceleyin, reaktivite ve store bağlantılarını doğrulayın, paralel çalışmada iş bölümünü netleştirin. Böylece ajan, sürdürülebilir Vue uygulamaları geliştirmede güvenilir bir yardımcı olur.

## Sık sorulanlar

**Cursor Agent Vue.js projelerinde nasıl başlatılır?** Terminalde Vue.js projesinin kök klasörüne gidin ve cursor-agent komutunu çalıştırın. Ajan mevcut dosyaları, AGENTS.md veya .cursor/rules içeriğini okuyarak bağlam kazanır.

**Cursor Agent’a Vue.js projesi için hangi kurallar verilmeli?** AGENTS.md veya .cursor/rules dosyasına build, test ve lint komutları; klasör yapısı; Composition API ve <script setup> zorunluluğu; Pinia’da storeToRefs kullanımı gibi Vue’ya özgü kurallar yazılmalıdır.

**Cursor Agent Vue.js’te reaktivite hataları yapar mı?** Bazen yapar; Pinia state’ini destructure etmek veya reactive nesneleri yanlış dönüştürmek gibi hatalar olabilir. Bu yüzden testler ve kod incelemesi şarttır.

**Cursor Agent’ı Vue.js testleriyle birlikte nasıl kullanmalı?** Her değişiklikten sonra Vitest çalıştırılmalı; ajanın testleri yazması ve çıktıyı okuması istenmelidir. Önce başarısız test yazdırıp sonra implementasyon yaptırmak güvenilir bir döngüdür.

---

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