# opencode ile Nuxt Projelerinde Verimli Kodlama Rehberi

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

opencode ile Nuxt projelerinde dosya tabanlı routing, server route ve composable geliştirmeyi öğrenin. AGENTS.md kurulumu, testler ve dikkat edilecek noktalar.

**Kısaca:**

- opencode proje klasöründe opencode komutuyla çalışır ve AGENTS.md dosyasındaki Nuxt kurallarını otomatik okur.
- Küçük adımlarla ilerleyip her değişiklikte pnpm test ve pnpm build çalıştırarak SSR ve auto-import hatalarını erken yakalayın.
- Server route, composable ve dinamik page geliştirmeyi ajanla yaparken daima git diff ve test çıktısını inceleyin.

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

```markdown
# 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](/blog/opencode-nasil-kullanilir/) 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].vue` sayfasında `useFetch` yerine `useAsyncData` kullanarak ürün detayını çek; yükleniyor ve hata durumlarını ayrı bileşenlere ayır. Sonra `pnpm test` çalıştır."
- "`server/api/urunler/index.get.ts` içinde filtreleme için query parametrelerini Zod ile doğrula; geçersizse `createError` ile 400 dön. Vitest testini ekle ve çalıştır."
- "Yeni bir `useKullanici` composable’ı oluştur; kullanıcı bilgisini `useState` ile SSR/CSR uyumlu sakla, `server` tarafında çalışacak bir getter ekle. Birim testini yaz."
- "`pages/index.vue` içindeki tekrar eden kart yapısını `components/UrunKarti.vue` olarak çı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.ts` endpoint’ine auth kontrolü ekle; yetkisiz isteklerde `createError` ile 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)](/blog/paralel-yapay-zeka-kodlama-ajani-araclari/) 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.

## Sık sorulanlar

**opencode Nuxt projesinde nasıl başlatılır?** Proje klasöründe terminalde opencode komutunu çalıştırın. Ajan otomatik olarak AGENTS.md dosyasını okur; Nuxt kurallarınızı buraya ekleyerek yönlendirebilirsiniz.

**opencode için Nuxt AGENTS.md dosyasına neler yazılmalı?** Build, test ve lint komutları; pages, server/api, composables gibi klasör kuralları; auto-import, SSR ve createError gibi Nuxt’a özgü konvansiyonlar. Örnek bir dosya rehberin kurulum bölümünde var.

**opencode Nuxt’ta server route geliştirebilir mi?** Evet, server/api altında Nitro handler’ları, defineEventHandler ve h3 yardımcılarıyla oluşturabilir. Doğrulama için Zod ve hata döndürmek için createError kullanmasını isteyin.

**opencode ile Nuxt testleri nasıl çalıştırılır?** Ajanın pnpm test veya pnpm vitest run komutlarını çalıştırmasını isteyin. Her değişiklikten sonra test sonucunu ve git diff çıktısını inceleyerek hataları yakalayın.

---

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