opencode’u Nuxt projesinde kullanmak için proje klasöründe opencode komutunu çalıştırın; ajan, Nuxt’un dosya tabanlı yapısını ve AGENTS.md kurallarını dikkate alarak route, composable ve server API geliştirebilir. Genel kurulum adımları için opencode nasıl kullanılır? Adım adım rehber rehberine de bakılabilir. Bu yazı, Nuxt bilen geliştiriciler için pratik bir çalışma döngüsü sunar.
Neden opencode Nuxt işlerine uygun?
Nuxt projeleri yapısal ve kural tabanlıdır: pages/ altındaki her dosya bir route, server/api altındaki her dosya bir Nitro endpoint, composables/ altındaki her dosya otomatik import edilen bir parçadır. opencode bu yapıyı okuyup küçük değişiklikleri birden çok dosyada tutarlı biçimde uygulayabilir. Örneğin bir sayfa bileşeni eklerken ilgili route, test ve server handler’ı birlikte düzenleyebilir; Vitest ile sonucu doğrulayabilir. Nuxt’un SSR/CSR geçişi ve auto-import kuralları ajan için net dokümantasyon gerektirir, bu yüzden AGENTS.md kritik olur. Nitro tabanlı server route’ların testleri Node ortamında çalıştığı için ajanın ayrı bir sunucu süreci başlatmasına gerek kalmadan doğrulanabilir.
Projeyi ajan için hazırlama
opencode proje klasöründeki AGENTS.md dosyasını otomatik okur. Nuxt projesinde bu dosyaya komutlar, klasör konvansiyonları ve Nuxt’a özgü kurallar yazılmalıdır. Aşağıdaki örnek kısa ama işlevsel bir şablondur:
# Nuxt Projesi İçin Ajan Kuralları
## Komutlar
- Kurulum: `pnpm install`
- Geliştirme: `pnpm dev`
- Build: `pnpm build`
- Test: `pnpm test` (Vitest)
- Lint: `pnpm lint` (eslint .)
## Klasörler
- `pages/`: dosya tabanlı route; dosya adı URL'i belirler, `[id].vue` dinamik segment oluşturur.
- `server/api/`: Nitro server route; her dosya `defineEventHandler` ile handler export eder.
- `composables/`: `use` prefixli composable; otomatik import edilir, açık import yazmayın.
- `server/utils/`: sunucu tarafı yardımcılar; otomatik import edilir.
- `tests/`: Vitest testleri; route ve composable testleri burada tutulur.
## Nuxt Kuralları
- Vue auto-import'a güven; `ref`, `computed`, `useRouter` gibi API'leri import etme.
- SSR/CSR farkını gözet: `useFetch` yerine `useAsyncData` veya `$fetch` kullanırken `server` ve `client` davranışını açıklayın.
- Server route'larda `event.node.req` ve `event.node.res` yerine `h3` yardımcılarını tercih edin.
- Hata döndürmek için `createError` kullanın; yanıtı doğrudan `res.end` ile kapatmayın.
- Yeni bir API endpoint'i eklerken `tests/server/` altına karşılık gelen testi ekleyin.
- Route middleware eklerken `definePageMeta` veya `routeRules` kullanın; global middleware'i `middleware/` altına koyun.Bu dosya, ajanın Nuxt’un örtük davranışlarını yanlış yorumlamasını azaltır. Gerçek projede komutları kullandığınız paket yöneticisine göre güncelleyin; örneğin npm run test veya yarn test olabilir. opencode’un AGENTS.md ile nasıl çalıştığına dair genel bakış için opencode nasıl kullanılır? Adım adım rehber sayfasına bakabilirsiniz.
Çalışma döngüsü
Nuxt’ta opencode ile sağlıklı döngü şöyle işler: önce görevi tek bir dosya veya tek bir endişe alanıyla sınırlayın; ajandan kısa bir plan istemesini söyleyin; değişikliği yaptıktan sonra testleri çalıştırmasını ve diff özeti çıkarmasını isteyin; siz de git diff ile gözden geçirin. Her adımı onaylayarak ilerlemek, Nuxt’un auto-import ve SSR sürprizlerini erken yakalar. Aşağıdaki promptlar tipik Nuxt işleri için başlangıç noktasıdır:
- “
pages/urunler/[id].vuesayfasındauseFetchyerineuseAsyncDatakullanarak ürün detayını çek; yükleniyor ve hata durumlarını ayrı bileşenlere ayır. Sonrapnpm testçalıştır.” - “
server/api/urunler/index.get.tsiçinde filtreleme için query parametrelerini Zod ile doğrula; geçersizsecreateErrorile 400 dön. Vitest testini ekle ve çalıştır.” - “Yeni bir
useKullanicicomposable’ı oluştur; kullanıcı bilgisiniuseStateile SSR/CSR uyumlu sakla,servertarafında çalışacak bir getter ekle. Birim testini yaz.” - “
pages/index.vueiçindeki tekrar eden kart yapısınıcomponents/UrunKarti.vueolarak çıkar; props tiplerini TypeScript ile tanımla, auto-import’un çalıştığını doğrula, lint ve testi çalıştır.” - “
server/api/sepet.post.tsendpoint’ine auth kontrolü ekle; yetkisiz isteklerdecreateErrorile 401 dön. İlgili testi güncelle ve tüm server testlerini çalıştır.”
Ajandan her turda pnpm test ve pnpm build çalıştırmasını istemek, değişikliğin hem test hem üretim derlemesi açısından sağlam olduğunu gösterir.
Hangi işlerde iyi, nerelerde dikkatli olmalı?
opencode, şablon tekrarını azaltan refactorlar, server route ekleme, composable yazma, Zod doğrulaması, Vitest testi üretme gibi sınırları belirgin Nuxt işlerinde verimlidir. Öte yandan auto-import, SSR payload davranışı, route middleware sıralaması ve Nitro build çıktısı gibi konularda ajan bazen yanlış varsayımlar yapabilir. Aşağıdaki tablo bu görevler için yol gösterir:
| Görev | Etkili prompt | Dikkat edilecek nokta |
|---|---|---|
| Yeni dinamik route | “pages/urunler/[id].vue dosyasını oluştur, useAsyncData ile veriyi çek, id parametresini route.params üzerinden al.” | Route adının dosya adıyla birebir örtüştüğünü ve [id] segmentinin doğru kullanıldığını kontrol edin. |
| Server API endpoint | “server/api/urunler/index.get.ts içinde defineEventHandler ile liste döndür, h3’ün getQuery yardımcısını kullan.” | Handler’ın event.node.req yerine h3 yardımcılarını kullanmasını isteyin; aksi halde testler kırılabilir. |
| Composable ekleme | “useUrunStogu composable’ı oluştur, useState ile global state tut, sunucu tarafında veri çekmeyi yap.” | Composable’ın use prefix’i taşıması ve otomatik import edilebilmesi için export edildiğini doğrulayın. |
| Route middleware | “middleware/auth.ts dosyasını ekle, defineNuxtRouteMiddleware ile giriş kontrolü yap.” | Middleware’in hangi sayfalarda çalışacağını definePageMeta ile belirtmediğinde tüm route’larda devreye girebilir. |
| Test ekleme | “tests/server/urunler.test.ts içinde $fetch ile endpoint çağrısını test et.” | Nuxt test ortamında server route’ların doğru import edildiğinden emin olun; @nuxt/test-utils kurulu olmalı. |
Özellikle useAsyncData ile dönen verinin data.value içinde olduğunu, useFetch’in otomatik olarak data ve error sağladığını ajan bazen karıştırabilir; diff’i incelerken bu noktaları kontrol edin. Ayrıca ref ve reactive gibi Vue API’lerinin auto-import edildiği Nuxt’ta açık import eklemek gereksizdir; ajan bazen alışkanlıkla import satırı ekleyebilir, bu da lint hatasına yol açabilir.
Nuxt’ta test ve doğrulama
Ajanla çalışırken her değişiklikten sonra şu sırayı izlemek işleri hızlandırır: pnpm test ile birim ve server testlerini çalıştırın; ardından pnpm build ile SSR derlemesini doğrulayın; son olarak git diff ile değişiklikleri inceleyin. Nuxt’un nuxi typecheck komutu da tip hatalarını yakalar; ajanın bu komutu çalıştırmasını isteyebilirsiniz. Vitest, @nuxt/test-utils ile birlikte kullanıldığında server route’ları gerçek handler olarak çalıştırabilir; bu yüzden endpoint testleri için ayrı bir sunucu sürecine gerek yoktur. Ajanın test çıktısını özetlemesini ve başarısız olan assertion’ları satır numarasıyla bildirmesini isteyin. Ayrıca pnpm lint çıktısı, auto-import’a aykırı import satırlarını ve kullanılmayan değişkenleri gösterir; bu da Nuxt’a özgü hataları yakalar.
Birden fazla ajanı AgentVera ile çalıştırma
AgentVera, opencode dahil birden çok kodlama ajanını aynı pencerede gerçek terminal panelleriyle yan yana çalıştıran bir masaüstü uygulamasıdır. Nuxt projesinde her ajanı kendi git worktree’sinde çalıştırarak route, server API ve composable görevlerini paralel yürütebilirsiniz; dosyalar birbirinin üzerine yazmaz. Bir ajanın turu bittiğinde ikinci model kodu otomatik inceler ve bulguları file:line olarak gösterir; bu, auto-import hatalarını ve SSR sorunlarını hızlı yakalar. Her turun anlık görüntüsü checkpoint olarak saklanır ve tek tıkla geri alınabilir. Token bütçeleri ajan başına sınır koyarak maliyeti kontrol altında tutar. Daha fazla bilgi için Paralel kodlama ajanları için en iyi araçlar (2026) sayfasına bakın.
Özet
opencode, Nuxt projesinde AGENTS.md ile net kurallar tanımlandığında dosya tabanlı route, server API ve composable geliştirmeyi hızlandırır. Küçük adımlarla çalışıp her turda test ve build çalıştırmak, auto-import ve SSR tuzaklarını en aza indirir. Farklı görevler için ayrı ajanlar veya AgentVera gibi paralel çalışma ortamları, büyük Nuxt projelerinde işleri daha da hızlandırabilir.