Middleware, Plugin ve Composable Arasındaki Fark

Farklı yaşam döngüleri, farklı sorumluluklar

Nuxt 3 güçlü ama ilk başta biraz kafa karıştırıcı bir ekosisteme sahiptir. Özellikle üç kavram sıklıkla birbirine karıştırılır: Middleware, Plugin ve Composable.
Hepsi uygulamanın farklı yaşam döngülerinde devreye girer ve farklı sorumluluklara sahiptir.

Bu yazıda, bu üç kavramın görevlerini, farklarını ve en iyi kullanım senaryolarını örneklerle açıklıyoruz.

1. Middleware - Sayfa Geçişlerini Yönetmek

Nasıl Çalışır?

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser()
  if (!user.value) return navigateTo('/login')
})

Türleri

• Route Middleware: Sayfa bazlı veya global çalışır (middleware/ klasöründe).
• Server Middleware: API veya sunucu isteği seviyesinde çalışır (server/middleware/).

Ne Zaman Kullanılır?

• Kimlik doğrulama / yönlendirme kontrolü.
• Route bazlı izin sistemi.
• Sayfa yüklenmeden önce yapılan veri kontrolü.

2. Plugin -- Uygulamayı Genişletmek

Nasıl Çalışır?

// plugins/axios.ts
import axios from 'axios'
export default defineNuxtPlugin((nuxtApp) => {
  const api = axios.create({ baseURL: '/api' })
  nuxtApp.provide('api', api)
})

const { $api } = useNuxtApp()

Ne Zaman Kullanılır?

• Üçüncü parti kütüphaneler (ör. Axios, dayjs, GSAP) entegre edileceğinde.
• Global mixin veya helper eklemek istendiğinde.
• App genelinde kullanılacak servis tanımlamak için.

3. Composable -- Mantığı Tekrar Kullanmak

Nasıl Çalışır?

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0)
  const inc = () => count.value++
  const dec = () => count.value--
  return { count, inc, dec }
}

const { count, inc } = useCounter()

Ne Zaman Kullanılır?

• Birden fazla bileşende aynı mantığı paylaşmak istediğinde.
• LocalStorage, API çağrıları, form doğrulama gibi kodları tek yerde toplamak istediğinde.
• Daha modüler, test edilebilir yapı kurmak için.

Karşılaştırma Tablosu

Örnek Senaryo

• Giriş kontrolü → Middleware (auth.global.ts)
• Auth servisinin oluşturulması → Plugin (plugins/auth.ts)
• Login mantığının component dışında paylaşımı → Composable (useAuth.ts)

middleware/auth.global.ts  →  Erişim kontrolü
plugins/auth.ts            →  $auth servisi tanımı
composables/useAuth.ts     →  Login / logout mantığı

Sık Karıştırılan Durumlar

1. Composable’da Plugin kullanmak: Evet, mümkündür. Örneğin $api’yi bir composable içinde kullanabilirsin.
2. Middleware’de Composable çağırmak: Evet, bu da mümkündür. Çünkü middleware bile setup aşamasında çalışır.
3. Plugin içinde reactive tanım: Yapılabilir ama dikkatli ol; plugin’ler globaldir, state paylaşımı riski vardır.

Sonuç

• Middleware → “Gitmeden önce kontrol et.”
• Plugin → “Uygulamayı genişlet.” 🔌
• Composable → “Mantığı paylaş.”