Nuxt.js Nedir? Nuxt.js Nasıl Kurulur? Nuxt.js ile Vue.js Projesi Nasıl Geliştirilir?

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 >