Nuxt 3, Vue.js tabanlı modern web uygulamaları geliştirmek için kullanılan, yapılandırması kolay ve performansı yüksek bir framework’tür. 2021 yılının sonlarında beta olarak yayınlanmış ve hızla popülerlik kazanmıştır.
İlk olarak Vue.js tabanlı uygulamalar için bir framework olarak geliştirildi, zamanla SSR (Server-Side Rendering), SSG (Static Site Generation) gibi özellikler eklenerek daha kapsamlı hale geldi. Nuxt 3, bu evrimin en son ürünüdür ve Vue 3'ün reactivity ve composition API’si gibi yeniliklerini içerir.
Not: Vue 2 son update’ini aldı ve 31 Aralik 2023 tarihinde artık sonlanıyor.
https://github.com/vuejs/vue/releases/tag/v2.7.16
Nuxt 3, modüller, eklentiler ve topluluk tarafından oluşturulan birçok araçla zengin bir ekosisteme sahiptir. Vue tabanlı birçok kütüphane ve araçla uyumludur. Bu yazıda, Nuxt 3'ün temel kavramlarını ve en heyecan verici yeni özelliklerini keşfedeceğiz.
Nuxt 3 Temelleri
Nuxt 3, Vue 3 tabanlı modern web uygulamaları oluşturmak için tasarlanmış bir framework’tür. Nuxt 2'nin tamamen yeniden yazılmasıyla ortaya çıkan bu framework, hızlı Vite altyapısı üzerine kurulu ve yeni veri getirme stratejileri, güncellenmiş yapılandırma dosyası gibi birçok iyileştirmeler sunmaktadır.
Sayfa (Page): Nuxt 3 projelerinde sayfalar önemli bir yer tutar. Her sayfa, pages dizini altında bir dosya olarak yer alır ve URL yapılandırması otomatik olarak(file base routing) gerçekleşir. Örneğin, pages/index.vue dosyası ana sayfayı temsil eder.
<!-- pages/index.vue -->
<template>
<div>
<h1>Ana Sayfa</h1>
</div>
</template>Dinamik Sayfalar (Dynamic Pages): Parametrelerle çalışan dinamik sayfalar, dinamik URL yapılandırmasını sağlar. Bu, [param] sözdizimini kullanarak gerçekleştirilir.
<!-- pages/users/[id].vue -->
<template>
<div>
<h1>Kullanıcı ID: {{ $route.params.id }}</h1>
</div>
</template>Layouts: Sayfalarınızın genel görünümünü düzenlemek için kullanılır. layouts dizini altında bulunurlar ve sayfa bileşenleri bu düzen içinde yer alır.
<!-- layouts/default.vue -->
<template>
<div>
<header>Header</header>
<main>
<nuxt />
</main>
<footer>Footer</footer>
</div>
</template>Middleware: Sayfa veya sayfa gruplarına uygulanan işlem öncesi veya işlem sonrası mantığı eklemek için kullanılır. Örneğin, kimlik doğrulama gibi işlemler bu kısımda ele alınabilir.
// middleware/my-middleware.ts
export default defineNuxtRouteMiddleware((to, from) => {
if (to.params.id === '1') {
return abortNavigation()
}
// In a real app you would probably not redirect every route to `/`
// however it is important to check `to.path` before redirecting or you
// might get an infinite redirect loop
if (to.path !== '/') {
return navigateTo('/')
}
})<script setup lang="ts">
definePageMeta({
middleware: ["my-middleware"]
// or middleware: 'my-middleware'
})
</script>Plugins: Uygulamanıza ekstra işlevselliği entegre etmek için kullanılır. Örneğin, Axios gibi kütüphaneleri projenize dahil etmek için bu kısımda işlem yapabilirsiniz.
// plugins/hello.ts
export default defineNuxtPlugin(nuxtApp => {
// Doing something with nuxtApp
})SEO & Meta Tags: Nuxt, sayfa başlıkları, açıklamaları ve diğer meta etiketlerini yönetmek için head metodunu kullanır. Bu özellikler, arama motorları tarafından daha iyi anlaşılabilen ve sıralanabilen sayfalar oluşturmanıza yardımcı olur.
<script setup lang="ts">
const description = ref('My amazing site.')
useHead({
meta: [
{ name: 'description', content: description }
],
})
</script>Nuxt 3, hızlı Vite altyapısı, dosya tabanlı yönlendirme ve dinamik sayfalar gibi özellikleriyle esneklik ve performans sağlayarak öne çıkıyor.
Nuxt CLI
Nuxt 3 projesi olusturmak hızlı ve kolaydır. Nuxt 3 projesi oluşturmak için Nuxt CLI(Nuxi)’yi kullanacağız. unjs/citty kullanarak sıfırdan yeniden inşa edilen Nuxi, Nuxt projelerinizi kolayca oluşturmak ve bağımlılık içermeyen bir deneyim sağlamak üzere tanıtılmıştır.
Yeni proje oluşturma:
Terminal ekranınızda aşağıdaki komutları uygulayarak yeni bir proje yaratabilirsiniz. VsCode code editörü ile kodları düzenleyebilirsiniz.
npx nuxi@latest init <project-name>
cd <project-name>
npm install
npm run dev -- -oTarayıcınız otomatik olarak http://localhost:3000 sayfasını açacaktır ve uygulamanızı oluşturmaya hazırsınız.
https://nuxt.com/docs/getting-started/installation#prerequisites
Nuxi ile component, plugin, middleware gibi Nuxt dosyalarını komut yardımıyla da oluşturabilirsiniz. Daha fazla komut için: https://nuxt.com/docs/api/commands/add
Nuxt 3 ile Gelen Yenilikler ve Gelişmiş Özellikler
Nuxt, tekrarlayan görevleri otomatikleştirmek ve geliştiricilere özelliklere odaklanma imkanı tanımak için belirli kurallar ve bir görüşe dayalı dizin yapısı kullanır.
File-based routing: Nuxt, dosya tabanlı yönlendirme sistemini kullanır. Yani, pages dizinindeki her Vue dosyası otomatik olarak bir route olarak algılanır. Bu, uygulamanızı düzenlemeyi kolaylaştırır ve manuel route yapılandırması ihtiyacını ortadan kaldırır.
Automatic Code splitting: Nuxt, kodunuzu otomatik olarak daha küçük parçalara(chunks) böler ve yalnızca gerekli kodun yüklendiğinden emin olur. Bu da uygulamanızın performansını artırarak ilk yükleme süresini azaltmaya yardımcı olabilir.
Server-side rendering out of the box: Nuxt yerleşik SSR özellikleriyle birlikte gelir, böylece kendiniz ayrı bir sunucu kurmak zorunda kalmazsınız.
Auto-imports: Vue composables ve componentlerini kendi dizinlerinde yazıp import etmek zorunda kalmadan kullanabilirsiniz. Ayrıca nuxt.config.ts dosyasinda kendi özel dizinlerinizi (directory) tanımlayarak auto-import özelliği verebilirsiniz.
Data-fetching utilities: Nuxt, SSR uyumlu veri getirmenin yanı sıra farklı stratejileri işlemek için composables sağlar. Nuxt, tarayıcı veya sunucu ortamlarında veri getirme işlemini gerçekleştirmek için iki composables ve built-in bir kütüphane ile birlikte gelir: useFetch, useAsyncData ve $fetch.
Özetle,
- useFetch, bir componentin setup fonksiyonunda veri getirme işlemini gerçekleştirmenin en kolay yoludur.
- $fetch, kullanıcı etkileşimine dayalı ağ istekleri yapmak için harikadır.
- useAsyncData, $fetch ile birlikte daha ayrıntılı kontrol sunar.
Why using specific composables?
useFetch
$fetch
useAsyncData
useAsyncDataZero-config TypeScript support: Auto-generated tipler ve tsconfig.json ile TypeScript öğrenmek zorunda kalmadan type-safe(tip güvenli) kod yazabilirsiniz.
Configured build tools: Geliştirme sürecinde hot module replacement (HMR) desteklemek için varsayılan olarak Vite kullanır ve kodunuzu production için en iyi şekilde paketler.
Nitro Server Engine
Başlangıçta Nuxt için yaratılmıştır, ancak şimdi UnJS’nin bir parçası ve diğer frameworkler için açık ve hatta kendi başına da kullanılabilir.
Nitro, yüksek performans ve taşınabilirlik amacıyla oluşturulmuş minimal bir HTTP framework’u olan h3'ü dahili olarak kullanmaktadır.
Powered by Nitro: https://nuxt.com/docs/getting-started/server
Rendering Modes
Nuxt universal rendering, client-side rendering gibi farklı rendering modelarını destekler, ama aynı zamanda hybrid-rendering de sunar ve uygulamanızı CDN Edge Sunucularında render etme imkanı sunar.
Nuxt varsayılan olarak daha iyi kullanıcı deneyimi, performans sağlamak ve arama motoru indekslemesini optimize etmek için universal rendering kullanır, ancak rendering modlarını tek bir yapılandırma satırıyla değiştirebilirsiniz.
Hybrid rendering, Route Rules kullanarak route başına farklı önbellekleme kurallarına (caching rules) izin verir ve sunucunun belirli bir URL’deki yeni bir isteğe nasıl yanıt vermesi gerektiğine karar verir.
Modules
Nuxt modülleri, Nuxt uygulamanızın genel yapılandırmasını ve davranışını genişletmek ve özelleştirmek için kullanılır. Modüller, Nuxt’ın iç işleyişine daha derinlemesine müdahale etme yeteneğine sahiptir.
Modules ile birçok şey yapabilirsiniz:
- Build sürecini özelleştirme
- nuxt.config.ts dosyasında yapılandırma seçeneklerini değiştirme veya genişletme
- dinamik şekilde middleware, plugin ekleyebilir ve api entegrasyonlari yapabilme
Modüller, Nuxt uygulamasının genel yapılandırmasını ve server-side işlemlerini etkiler. Uygulama başlatılmadan önce, yapılandırma aşamasında çalışır.
Artık nuxt modülleri oluşturmak için @nuxt/kit adlı bir geliştirme kiti ile siz de kendi nuxt modüllerinizi oluşturup yayınlayabilirsiniz.
Nuxt Modules: https://nuxt.com/modules
Plugins
Vue uygulamanızın içinde çalışır ve genellikle Vue instance’ına özel işlevsellikler eklemek için kullanılır. Plugin’ler, uygulamanızın Vue tarafındaki davranışını özelleştirmek için idealdir.
Plugins ile yapabilecekleriniz:
- Global Vue componentleri tanımlayabilirsiniz.
- Vue instance’ına özel methodlar, direktifler ekleyebilirsiniz.
- Global mixin’ler ekleyebilirsiniz.
Plugin’ler, Vue instance’ı ve client-side işlemlerini etkiler. Uygulama başlatıldıktan sonra, Vue instance’ı oluşturulurken çalışır.
Nuxt Content
İçerik yönetimi ve yazı oluşturma süreçlerinizi basitleştirmek için Nuxt Content ideal bir çözümdür. Markdown desteği, tam metin arama ve canlı önizleme özellikleriyle zengin bir içerik deneyimi sunar. Nuxt Content, projenizdeki content/ dizinini okur, .md, .yml, .csv ve .json dosyalarını ayrıştırarak uygulamanız için güçlü bir veri katmanı oluşturur.
Nuxt Devtools
Yakın zamanda geliştirici deneyiminizi iyileştirmek için resmi bir Nuxt devtools yayınlandı. Tüm uygulama sayfalarınızı (pages), bileşenlerinizi (components), imports, modules, hooks ve çok daha fazlasını Devtools ile görebilirsiniz.
@nuxt/devtools-kit kullanarak Nuxt DevTools’a kendi modül entegrasyonunuzu ekleyebilirsiniz.
Composables
Vue 3 ile Vue 2 arasındaki belki de en büyük fark composables’lardır. Composables, Nuxt 3'te geliştiricilerin fonksiyonları yeniden kullanılabilir (resuable) fonksiyonlar halinde kapsüllemesine olanak tanıyan yeni bir özelliktir. Bu fonksiyonlar daha sonra componentler, sayfalar ve hatta diğer composable’lar arasında paylaşılabilir. Bir kere yaz her yerde kullan mantığı vardır.
Vue composable’larınızı uygulamanıza otomatik olarak içe aktarmak (auto-import) için composables/ dizinini kullanabilirsiniz.
Lazy Loading Component
Bir componenti (lazy-loading component) dinamik olarak içe aktarmak için, şablonunuzda componentin adına Lazy önekini ekleyin. Componente yalnızca bazen ihtiyaç duyuluyorsa bu yaklaşım kullanışlıdır. Lazy önekini kullanarak, bileşen kodunun yüklenmesini uygun ana kadar erteleyebilirsiniz, bu da JavaScript paketinizin boyutunu optimize etmenize yardımcı olabilir.
<template>
<div>
<TheHeader />
<slot />
<LazyTheFooter />
</div>
</template>State Management
Nuxt, componentler arasında reaktif, SSR uyumlu paylaşılan bir durum oluşturmak için useState composable’i sunar. useState ref’e SSR dostu bir alternatiftir. Değeri(value), server-side rendering işleminden sonra (client-side hyradition sırasında) korunur ve benzersiz bir anahtar (unique key) kullanılarak tüm bileşenler arasında paylaşılır.
useState yerine resmi Vue state management aracı olan ve artık Vuex’in yerini de aldı diyebileceğimiz yeni state management aracı Pinia’ı da kullanabilirsiniz. Pinia, durum yönetimi için modern ve hafif bir çözümdür.
Pinia: https://pinia.vuejs.org/
Nuxi
Nuxt’ın yeni komut satırı arayüzüne Nuxi adı verildi. Vue CLI gibi ama Nuxt içindir. Nuxi, projenize modüller, eklentiler, bileşenler, sayfalar vb. eklemenize olanak tanır. Yeni bir proje oluşturmak için de kullanmak mümkündür.
UnJS ?
UnJS nedir? Kısaca Universal JavaScript için araç ve kütüphanelerden oluşan bir koleksiyon diyebiliriz. Vue.js tabanlı uygulamalar geliştirmek, UnJS ekosistemi ile birlikte gelen yeni paketler ve diğer yardımcı kütüphaneler sayesinde daha pratik ve performanslı hale geldi. Tüm bu paketler kendi aralarında uyumlu çalışabildiği gibi Nuxt 3 ile de uyumludur. UnJS’in çıkma amaçlarından biri bağımlılıkları azaltıp, birbiriyle uyumlu ve performanslı bir geliştirme ortamı sağlamaktır.
Örnegin Nuxt 3 içerisinde kullanılan Nitro, UnJS koleksiyonunda barınan paketlerden sadece bir tanesidir ve yine UnJS paketi olan h3 üzerine inşa edilmiştir.
UnJS: https://unjs.io/
Özetle, Nuxt 3'ün sunduğu yeni özelliklerle, geliştirme süreçlerindeki verimliliğin ve esnekliğin arttığını görmek oldukça heyecan verici. Dosya tabanlı yönlendirme ve Nitro server engine gibi güçlü özellikler, projelerin daha düzenli ve performanslı bir şekilde geliştirilmesine olanak tanıyor. Bu bağlamda, Nuxt 3'ü tercih etmek, projelerin karmaşıklığını daha etkili bir şekilde yönetme ve optimize etme fırsatı sunuyor.
