Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n
Optimize edilmiş görseller için @nuxt/image, kimlik doğrulama için @nuxtjs/auth-next ve uluslararasılaştırma için @nuxtjs/i18n kurup yapılandırmayı öğrenin.
Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Nuxt Modülleri Nedir?
Modüller, Nuxt için resmî genişletme mekanizmasıdır. Modüller nuxt.config.ts dosyasına kurulur ve derleme, çalışma zamanı ile geliştirme sunucusuna bağlanır. Ekosistemdeki özelliklerin çoğu modül olarak sunulur.
Bir Modül Kurma
Modülü npm install komutuyla kurun, ardından nuxt.config.ts içindeki modules alanına ekleyin.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
<img> etiketini optimize edilmiş <NuxtImg> ile değiştirir: otomatik biçim (WebP/AVIF), duyarlı srcset, tembel yükleme ve CDN entegrasyonu sağlar.
<template>
<NuxtImg
src="/photos/sunset.jpg"
alt="Sunset"
width="800"
height="600"
format="webp"
loading="lazy"
sizes="sm:100vw md:50vw lg:800px"
/>
</template>Görsel Yönlendirme için NuxtPicture
<NuxtPicture>, görsel yönlendirme için birden fazla <source> etiketi içeren bir <picture> öğesi oluşturur.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Görsel Sağlayıcı Yapılandırması
Tüm görsellerin bir CDN üzerinden yönlendirilmesi için bir CDN sağlayıcısı (Cloudinary, imgix, Vercel vb.) yapılandırın.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (Kimlik Doğrulama)
Birden fazla sağlayıcı sunan kimlik doğrulama modülü: NextAuth uyumlu OAuth, yerel kimlik bilgileri ve özel akışlar.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Sayfalarda Kimlik Doğrulamayı Kullanma
useAuth() bileştirilebilir işlevi oturumu, durumu ve signIn/signOut işlevlerini sunar.
<script setup>
const { data: session, status, signIn, signOut } = useAuth();
</script>
<template>
<button v-if="status === 'unauthenticated'" @click="signIn('github')">
Sign in with GitHub
</button>
<div v-else>
Welcome, {{ session.user.name }}
<button @click="signOut">Sign out</button>
</div>
</template>Ara Katman Yazılımıyla Rotaları Koruma
Kimlik doğrulaması gerektirmek için bir sayfada kimlik doğrulama ara katman yazılımını kullanın.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (Uluslararasılaştırma)
Resmî uluslararasılaştırma modülü birden fazla dili, yerel ayar ön ekli rotaları, tembel yüklenen çeviri dosyalarını ve SEO dostu hreflang desteğini sunar.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'tr', file: 'tr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/'
}
});Bileşenlerde Çeviri Yapma
Şablonlarda $t, setup içinde ise useI18n kullanın.
<script setup>
const { t, locale } = useI18n();
</script>
<template>
<h1>{{ $t('welcome') }}</h1>
<p>{{ t('greeting', { name: 'Alice' }) }}</p>
<button @click="locale = locale === 'en' ? 'tr' : 'en'">
{{ $t('switch_lang') }}
</button>
</template>Yerel Ayar Ön Ekli Rotalar
URL'ler /en/about ve /tr/about biçimine dönüşür. Doğru ön eklerle bağlantılar oluşturmak için localePath('/about') kullanın.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Diğer Popüler Modüller
@pinia/nuxt (durum yönetimi), @vueuse/nuxt (200'den fazla bileştirilebilir işlev), @nuxtjs/tailwindcss (Tailwind kurulumu), @nuxtjs/color-mode (koyu mod) ve @nuxt/content (dosya tabanlı CMS).
Özel Modül Yazma
Dahili monorepo işlevleri için Nuxt yaşam döngüsüne bağlanan bir modül yazın. Modüller güçlüdür: bileşenler, çalışma zamanı yapılandırması, sunucu rotaları ve derleme adımları kaydedebilir.
Hızlı Kontrol
Otomatik WebP/AVIF ve duyarlı srcset desteğiyle optimize edilmiş görsel yüklemesi sağlayan Nuxt 3 modülü hangisidir?
Özet: Nuxt Modülleri
Modüller, nuxt.config.ts içindeki modules dizisi aracılığıyla kurularak Nuxt'ı genişletir. Optimize edilmiş görseller (otomatik biçim, srcset, tembel yükleme) için @nuxt/image. Kimlik doğrulama için @sidebase/nuxt-auth (veya nuxt-auth). Çeviriler ve yerel ayar ön ekli rotalar için @nuxtjs/i18n. Ayrıca: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss ve @nuxt/content. Dahili yeniden kullanım için özel modüller yazın.
Sıkça Sorulan Sorular
“Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n” dersi ücretsiz mi?
Evet — “Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n” dersinde ne öğreneceğim?
Optimize edilmiş görseller için @nuxt/image, kimlik doğrulama için @nuxtjs/auth-next ve uluslararasılaştırma için @nuxtjs/i18n kurup yapılandırmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Dosya Tabanlı Yönlendirme ve Otomatik İçe Aktarmalar
- useFetch ve useAsyncData
- Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n
- Dağıtım: Statik ve SSR Karşılaştırması