Gerçektende bu kadar popüler olarak kullanılmasının ardında neler var, React ve angulardan daha performanslı mıdır? Bunu birlikte inceleyerek göreceğiz. Nuxtjs kurulumundan, örnek kullanımına, uygulamalalı olarak tüm detaylarını sizler için derledim. Hazırsanız vuejs uygulamaları için geliştirilen nuxtjs anlatımımıza başlayalım.
Nuxt.js Nedir?
Nuxt.js; react uygulamaları için geliştirilen nextjs gibi, vue.js uygulamaları için geliştirilmiş ve ilhamını nextjs'den almış bir javascript freamworküdür. Kıyaslama yapma şansım olmadı şuana dek fakat react ve angular gibi hatta ve hatta daha performanslı çalıştığı söyleniyor.
Universal Vue Application; Üretmeye yarayan nuxtjs aynı zamanda "server side rendering" teknolojisini kullanarak vuejs'in kullanıcı bazlı browser üzerinde yaptığı single page uygulamayı google'ın indexlemesi için sayfa kaynak koduna SSR ile sayfa bilgilerini dahil ederek çalışmasını sağlıyor. Kısaca tabirle vuejs uygulamasını server üzerinde derleyerek kullanıcıya ve arama motorlarına sayfa kaynak kodları ile birlikte sunuyor.
Nuxtjs; Dosya ve klasör yapılarını kullaranak konfigürasyon yapması nextjs gibi routing tarafını kolaylaştırıyor. Gücünü Vuejs'den alan nuxtjs detaylı incelemesine geçmeden vuejs'i tanıyalım.
Vue.js avantajları nelerdir?
- Modern Javascipt Freamwork
- Popüler ve en hızlı yükselişe sahip js freamworküdür.
- Küçük ve Hafiftir.
- UI Widget arayüz eklentileri
- SPA (Single Page Application) Çoklu sayfa uygulamaları
- React, Angular Js freamworklerinin en iyi özelliklerini barındırıyor.
- Router ve State Management yapıları kolaydır.
- Client side rendering teknolojisini kullanır.
Server Side Rendering Nedir?
Kurulma ve nuxjs kullanımına başlamadan önce Server side rendering ve client rendering konularına değinerek aralarındaki farkı anlamaya çalışalım.
Single page uygulamalarının kabusu arama motoru optimizazyonu yani tarayıcıda kaynak html kodların görünmemesi ve robotların okuyamaması işte tam bu noktada nuxtjs devreye çözüm olarak giriyor.
Server sider rendering kaynak kodunda sitenize ait tüm detayları ile birlikte html olarak parse eder ve robotlar okur. Client rendering ise sayfa kaynağında html parse etmez robotlar bunu algılayamadığı için indexleyemez.
Bunu vuejs yapamıyor mu, nuxtjs ile çözümlenmiş? derseniz hayır arkadaşlar vuejs ile de ssr yapmanız mümkün fakat bir hayli karmaşık zaten vuejs kendi platformunda ssr kısmında nuxtjs sizin için çok daha kolay ve hızlı yapar diyor.
Nuxt.js ile Neler Geliştirebiliriz?
- Universal App
- Single Page App
- Static App
Evet, artık nuxtjs kurulumuna geçelim fakat bilgisayarınızda nodejs kurulu değilse kurun!
Nodejs nasıl kurulur?
Ubuntu Sunucuya veya mac,linux işletim sistemlerine Terminalden Nodejs Kurulumunu yapalım.
//Nodejs curl ile indirelim curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - //Kurulumu tamamlama komutu sudo apt-get install -y nodejs //Nodejs Versiyon soralım: node -v //Npm Versiyonunu Soralım npm -v //Versiyon numaralarını alabiliyorsak nodejs ve npm yüklenmiştir. //Not: killall node // komutu bütün node procesleri oldürür.
Nuxt.js Nasıl Kurulur?
Terminalden kurulum komutumuzu yazalım.
npm init nuxt-app nuxtone == or == npx create-nuxt-app nuxtone
permission denied: Hatası alırsanız
sudo npm init nuxt-app nuxtone == or == sudo npx create-nuxt-app nuxtone
json dosyası için bize bazı sorular soracak sadece javascipt ve Universal ssr secili olsun
? Project name: y ? Programming language: JavaScript ? Package manager: Npm ? UI framework: None ? Nuxt.js modules: (Press space to select, to toggle all, to invert se lection) ? Linting tools: (Press space to select, to toggle all, to invert sele ction) ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: (Press space to select, to toggle all, to invert selection) ? What is your GitHub username? ismailgultekin ? Version control system: None
Hata almaz "Successfully created project" kodu ekrana basılırsa yüklenmiş demektir.
cd nuxtone npm run dev
Hata alırsanız: ENOENT: no such file or directory, mkdir '/Users/evimdegor/Desktop/reactnative/vuejs/nuxtjs/nuxtone/.nuxt' diye terminalden nuxt'u npm ile install edelim.
npm install nuxt
Projeyi tekrar terminalden çalıştıralım.
npm run dev
Url adresinden 3000 portuna bağlanabiliyorsak kurulum tamamdır. Nuxt Projemiz: http://localhost:3000/
Nuxtjs klasör & root yapısı nelerden oluşuyor?
- .nuxt
- components
- node_modules
- pages
- static
- store
Yukarıda ki klasör ve .editorconfig, .gitignore, nuxt.config.js, package-log.json, package.json, README.md Dosyalarını göreceksiniz.
pages klasörü rooter url bazlı linkleme olarak ayarlanmış ve kullanımı gayet basittir. Örnek urlde: localhost:3000/iletisim yazdığımızda pages klasörü içine iletisim.vue açmamız yeterli ilk çalışan dosya ise default olarak index.vue dir.
Örnek olarak: pages klasorü içine about.vue oluşturalım ve urlden http://localhost:3000/about tıkladığımızda about.vue çalışmasını sağlayalım.
<template> <p>burası hakkımızda sayfasıdır.</p> </template >
Klasör ve dosyaları; uygulamalı olarak kullanırken her birine ayrı ayrı değineceğiz. Özellikle sabitler ve projemizin genel yapı taşlarını kullanırken "nuxt.config.js" değineceğiz.
Nuxt.js; Routing Yönetimi Nasıl Yapılır?
Nuxtjs Nedir? bölümünde "Dosya ve klasör yapılarını kullaranak konfigürasyon yapması routing tarafını kolaylaştırıyor." diye yukarıda http://localhost:3000/about örneğimizdeki gibi pages klasörü içinde oluşturduğumuz .vue dosyaları url kontrolünü otomatik olarak bizim için routing yaptığını görebiliyoruz. Şimdi bu routing konfigrasyonunu daha detaylı inceleyelim.
Şimdi url'e göre dosya yapısını kullanarak routing yapalım. localhost:3000/kategori tıklanıldığında çalışmasını pages klasörümüzün içine kagetori adında bir klasör açarak içine index.vue dosya oluşturup uygulamalı olarak içine kodlarımızı yazarak kullanalım.
<template> <p>burası kategori sayfasıdır.</p> </template >
localhost:3000/kategori url'ine tıkladığımızda artık içinde burası kategori sayfasıdır. ibaresiyle birlikte çalıştığını göreceksiniz.
Dinamik url routing yapısı
Dosya ve klasör yardımıyla routing yaptık bir diğer örneğimiz. Dinamik url routing konfigrasyonu http://localhost:3000/kategori/konu1 url'ine tıklandığında çalışması için kategori klasörümüzün içine _katid.vue dosyası oluşturalım ve içine kodlarımızı yazalım.
<template> <div class="conteiner"> <p>burası kategori id sayfasıdır.</p> </div> </template >

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
İlgili İçerikler
-
08 Aralık, 2021 890
Vuejs 3 Routing İşlemleri Ve Router Kullanımı
-
06 Aralık, 2021 1776
Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?
-
24 Temmuz, 2021 1477
Nodejs ReactJs Array functions Kullanım Yöntemleri
-
22 Temmuz, 2021 1960
React Nedir, Nasıl Kurulur, Reactjs Öğrenerek Proje Nasıl Geliştirilir?
-
01 Temmuz, 2021 4069
Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?
-
19 Haziran, 2021 1732
javascript KDV Hesaplama İşlemleri