# opencode ile Vue.js projelerinde pratik rehber

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

Vue.js projelerinde opencode ajanını Composition API, Pinia, Vite ve Vitest ile verimli kullanma; AGENTS.md ayarları, prompt örnekleri ve test akışı.

**Kısaca:**

- opencode, Vue.js projesinde ajanı proje klasöründe başlatarak SFC, Pinia store ve Vitest testlerini adım adım geliştirmenizi sağlar.
- AGENTS.md dosyasına build, test, lint komutları ve Vue.js klasör kuralları yazıldığında ajan daha tutarlı kod üretir.
- Testleri sık çalıştırıp diff’i incelemek, reactivity ve async test hatalarını erken yakalar.

Vue.js projesinde [opencode](/ajanlar/opencode/)'u doğrudan proje klasöründe `opencode` komutuyla başlatırsınız. Ajan, `AGENTS.md` dosyanızı okur ve verdiğiniz göreve göre tek dosyalı bileşenleri, Pinia store’larını ve testleri düzenler. Verimli çalışmak için ajanın proje yapısını net tanıması ve her değişiklikten sonra testleri çalıştırması gerekir.

## Neden opencode Vue.js işlerine uygun?

Vue.js projeleri tek dosyalı bileşenler, Composition API ve Pinia store’ları gibi birbirine bağlı katmanlardan oluşur. opencode, proje dosyalarını okuyup çok adımlı değişiklikleri planlayabildiği için bir bileşeni oluşturmak, bağlı store’u güncellemek ve testini yazmak gibi işleri tek oturumda yönetebilir. SFC’lerde template, script ve style aynı dosyada olduğundan ajan; emit, prop ve scoped CSS ilişkisini birlikte değerlendirir. Composition API kurallarını ve mevcut koddaki desenleri takip etmesini istediğinizde tekrar eden görevlerde tutarlı sonuç verir. Yine de reaktivite ve async testler gibi Vue’ya özgü noktalarda ürettiği kodu mutlaka gözden geçirmek gerekir; bu konuda [opencode mu Claude Code mu? Dürüst bir karşılaştırma](/blog/opencode-mu-claude-code-mu/) yazısı ajan seçiminde yardımcı olur.

## Projeyi ajan için hazırlama

opencode, proje kökündeki `AGENTS.md` dosyasını talimat kaynağı olarak kullanır. Vue.js projenizde ajanın doğru komutları çalıştırması ve kod stiline uyması için bu dosyaya kısa, uygulanabilir kurallar yazın. Paket yöneticisi, test, lint ve build komutları ile klasör yapısı ve Vue’ya özgü kurallar en kritik bölümlerdir. Aşağıdaki örnek, Vite + Pinia + Vitest tabanlı bir proje için başlangıç niteliğindedir:

```markdown
# AGENTS.md

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

## Klasör yapısı
- src/components: yeniden kullanılabilir SFC'ler
- src/views: sayfa düzeyindeki bileşenler
- src/stores: Pinia store'ları
- src/composables: Composition API composable'ları
- src/**/__tests__: bileşen ve store testleri (*.spec.ts)

## Vue.js kuralları
- Composition API kullan; `<script setup>` tercih et.
- `defineProps` ve `defineEmits` ile çalış; props'u asla doğrudan değiştirme.
- İlkel değerler için `ref`, nesneler için `reactive`; türetilmiş değerler için `computed`.
- Karmaşık template ifadelerini `computed` veya composable'a taşı.
- Pinia store'larını setup store olarak yaz; state destruct ederken `storeToRefs` kullan.
- Testlerde `@vue/test-utils` ile mount et; async işlemlerde `flushPromises` kullan.
- Yeni test eklemeden mevcut testleri bozma; ilgili test dosyasını her değişiklikten sonra çalıştır.
```

Bu dosya güncel kaldıkça ajan, paket yöneticisi karışıklığı veya yanlış test komutu gibi sorunları daha az yaşar. `AGENTS.md` hazırlamanın genel adımları için [opencode nasıl kullanılır? Adım adım rehber](/blog/opencode-nasil-kullanilir/) içeriğine bakabilirsiniz.

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

Vue.js projesinde opencode ile en iyi sonuç, büyük bir hedefi küçük ve doğrulanabilir adımlara bölmekten geçer. Önce ajanın mevcut dosyaları ve store yapısını özetlemesini isteyin; sonra tek bir bileşen veya store görevi verin. Ajan kodu ürettikten sonra mutlaka ilgili testleri çalıştırmasını söyleyin ve oluşan diff’i inceleyin. Başarısız test varsa hata çıktısını tekrar ajanla paylaşıp düzeltme isteyin. Aşağıdaki prompt’lar tipik Vue.js görevleri için başlangıç noktasıdır:

- "Proje yapısını incele; package.json script’lerini, mevcut Pinia store’larını ve Router kurulumunu özetle. Sonra ProductFilter bileşeninde fiyat aralığı filtresini computed ile düzelt."
- "src/components/UserList.vue için Vitest + Vue Test Utils ile test yaz. API çağrısını mock’la; yükleniyor, başarı ve hata durumlarını test et."
- "Yeni bir Pinia setup store’u oluştur: cart. `addItem`, `removeItem` ve `totalPrice` getter’ı ekle. Aynı zamanda store için test yaz."
- "Mevcut tüm testleri çalıştır. Başarısız olanları sırayla düzelt; her düzeltmeden sonra sadece ilgili test dosyasını tekrar çalıştır ve sonucu özetle."
- "Kod tabanındaki tüm SFC’leri tara. Props’u mutate eden veya `defineProps` dönen nesneyi destructure edip reaktiviteyi bozan yerleri Composition API kurallarına göre düzelt."

Ajanı her seferinde tek bir amaca yönlendirmek, diff’in küçük kalmasını ve hataların kaynağının kolay bulunmasını sağlar. Çalışma döngüsünün sonunda `npm run test:unit`, `npm run lint` ve gerekiyorsa `npm run build` komutlarını da ajan aracılığıyla çalıştırıp tüm projeyi doğrulayın.

## Hangi görevlerde iyi, nerelerde dikkatli olmalı?

opencode, Vue.js projelerinde özellikle yeni SFC bileşeni oluşturma, Composition API ile refactor, Pinia store ekleme ve test iskeleti çıkarma işlerinde hızlıdır. Mevcut bileşenlerdeki desenleri taklit edebilir ve `script setup` içinde tip güvenli kod üretebilir. Ancak Vue’ya özgü bazı tuzaklarda üretilen kodu dikkatle incelemek gerekir.

| Görev | Örnek prompt | Neden dikkat |
|---|---|---|
| Yeni SFC bileşeni | "CartItem.vue’yi Composition API ile oluştur; prop’ları doğrula, kaldırma olayını emit ile gönder." | Ajan props’u doğrudan değiştirebilir veya emit adını yanlış yazabilir. |
| Pinia store | "User store’unu setup store olarak oluştur; async fetch ile state yönet, testlerini yaz." | Store dışından state’i destructure etmek reaktiviteyi bozar; `storeToRefs` gerekir. |
| Test ekleme | "UserList için mock API ile başarı ve hata durumlarını test et." | `flushPromises` unutulursa async test yanlış geçer veya asılı kalır. |
| Mevcut kodu refactor | "Bu bileşendeki computed mantığı composable’a taşı ve testleri güncelle." | Auto-import kullanan projede import eklemeyi unutabilir veya yanlış dosya yolu kullanabilir. |

Ajanın ürettiği kodda özellikle şu noktaları kontrol edin: `reactive` ile `ref` karışıklığı, `defineProps` dönen nesnenin doğrudan destructure edilmesi, `v-model` kullanan özel bileşenlerde `defineModel` eksikliği ve Pinia store’da state’i modül düzeyinde tutma eğilimi. Ajan bazen gereksiz `watch` ekleyebilir veya `computed` yerine `method` kullanabilir; bu da kararlılığı azaltır.

## Test ve doğrulama

Vue.js projesinde ajanın ürettiği kodu doğrulamak için birincil komut `npm run test:unit` olmalıdır. Vitest, SFC ve Pinia store testlerini hızlı çalıştırdığı için ajanı her değişiklikten sonra ilgili test dosyasını çalıştırmaya yönlendirin. Test çıktısını yalnızca "başarılı" veya "başarısız" olarak özetlemesini değil, hata mesajını ve dosya:satır bilgisini paylaşmasını isteyin. Böylece ajan hatayı daha doğru düzeltebilir. Eğer projede TypeScript kullanılıyorsa `vue-tsc --noEmit` ile tip kontrolü yapın; lint için `npm run lint` komutunu da ekleyin.

Vue Test Utils ile test yazarken ajanın `mount` çağrısına Pinia veya Router plugin’lerini eklemesi gerekebilir. Örneğin bir store kullanan bileşen testi için `createTestingPinia` veya gerçek Pinia instance’ı oluşturup `global.plugins` içinde vermek gerekir. Ajan bu bağlamı atladığında testler çalışmayabilir. Bu nedenle AGENTS.md’ye test kurulumuyla ilgili bir not eklemek faydalıdır. Ayrıca ajanın yalnızca kendi ürettiği testleri değil, değiştirdiği bileşenin mevcut testlerini de çalıştırmasını isteyin; regresyonlar erken yakalanır.

## Birden fazla ajanı paralel çalıştırmak

Aynı Vue.js reposunda birden çok opencode ajanı kullanırken AgentVera’nın worktree desteği önemlidir: her ajan kendi dalında çalıştığı için SFC ve store dosyaları birbirinin üzerine yazılmaz. Ajan turu bitince devreye giren otomatik kod incelemesi, Pinia reaktivite hatalarını veya eksik `flushPromises` çağrılarını dosya:satır bilgisiyle gösterir. Checkpoint’ler ise bozulan bir bileşen refactor’ünü tek tıkla geri almayı ve oturumu adım adım yeniden izlemeyi sağlar; token bütçeleri de uzun test düzeltme turlarında kullanımı sınırlandırır.

## Sonuç

opencode, Vue.js projelerinde doğru `AGENTS.md`, küçük görevler ve düzenli test döngüsüyle ciddi zaman kazandırır. Ajanın ürettiği diff’i ve test çıktılarını her adımda inceleyin; reaktivite, props ve async test hatalarına karşı tetikte olun. Gerektiğinde paralel ajanlar için worktree ve checkpoint imkânı sunan bir ortamla çakışma riskini azaltın. Böylece opencode, Vue.js geliştirme sürecinin doğal bir parçası haline gelir.

## Sık sorulanlar

**opencode’u Vue.js projesinde nasıl başlatırım?** Proje klasöründe terminalde opencode komutunu çalıştırın. Ajan proje dosyalarını ve AGENTS.md talimatlarını okuyacaktır. İlk görevde mevcut paket yöneticisi ve script’ler kontrol edilir.

**Vue.js projesinde AGENTS.md’ye ne yazmalıyım?** Paket yöneticisi, test, lint ve dev komutlarını, src klasör yapısını, Composition API ve Pinia kurallarını yazın. Dosya yolları ve test isimlendirme kurallarını eklemek ajanın kararlılığını artırır.

**opencode Vue SFC’lerde ne tür hatalar yapabilir?** Reaktiviteyi bozabilecek ref/reactive karışıklığı, props mutasyonu veya async testte flushPromises eksikliği gibi hatalar yapabilir. Üretilen diff dikkatle incelenmeli, testler çalıştırılmalı.

**opencode ile Vue testlerini nasıl çalıştırırım?** Ajanı npm run test:unit veya projenizdeki Vitest komutunu çalıştırması için yönlendirin. Test sonuçlarını diff ile birlikte değerlendirip hataları komut çıktısıyla geri bildirin.

---

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