NuxtJS nedir? Nasıl kullandık?

Published in

inventiv

6 min readJan 19, 2023

NuxtJS Nedir?

NuxtJS, Vue.js uygulamaları oluşturmaya yönelik bir frameworktür. Amacı, Vue geliştiricilerinin birinci sınıf teknolojilerden hızlı, kolay ve organize bir şekilde yararlanmasına yardımcı olmaktır. Nuxt 2 ve Nuxt 3 olarak iki versiyonu vardır. Nuxt 2 versiyonunda Vue 2 kullanılmıştır. Nuxt 3 te ise Vue 3 kullanılmaktadır. Biz bu yazımızda Nuxt 2 ile ilgili bilgilendirme ve deneyimlerimizi paylaşacağız. Keyifli okumalar dileriz.

NuxtJS’in Vue.js’e göre avantajları

Sunucu tarafında renderleme (Server-side rendering): NuxtJS, Vue.js bileşenlerinizi sunucuda otomatik olarak render edebilir. Bu sayede uygulamanızın performansını iyileştirir ve daha SEO (Search Engine Optimization) dostu hale getirir. Bu özellik proje ayarlarından açılıp kapatılabilir.
Otomatik kod bölümleme (Automatic code-splitting): NuxtJS, kodunuzu daha küçük yığınlara otomatik olarak böler, bu da performansı iyileştirmeyi hedefler.
Büyük ekosistem: NuxtJS, Vue.js içinde bulunan tüm kütüphaneleri kullanır.
Kolay kullanım: NuxtJS, Vue.js uygulamalarınızı daha kolay bir şekilde oluşturmaya yardımcı olur ve daha kullanılabilir bir yapı sağlar. Geliştiriciye default bir dosya yapısı sunar.

NuxtJS projesi nasıl oluşturulur?

NuxtJS kurulması için ilk gereksinimler node ve npm’dir. Node’un son desteklenen sürümü kullanılması tavsiye edilir (LTS), buradan indirilebilir.

Projeyi içerecek klasör oluşturulduktan sonra bu klasör içinde bir shell açılır.

npm init nuxt-app example

Yukarıdaki komut ile Nuxt projesinin kurulumu başlatılır. Kurulum sırasında Nuxt tarafından bazı proje ayarları (programlama dili, arayüz framework’ü vs.) sorulur.

Verilen seçeneklere göre tercihler yapıldıktan sonra proje kurulumu tamamlanmıştır.

npm run dev

Yukarıdaki komut ile proje ayağa kaldırılır.

localhost:3000 ile oluşturulmuş siteye gidilebilir.

Proje oluşturulduktan sonraki default dizin yapısı aşağıdaki gibidir.

Peki Nasıl Uyguladık?

Nuxt uygulamamızı geliştirirken varsayılan dosya yapısını kullandık. Bu dosyalara ek olarak ihtiyacımız olan klasörleri ve ortam bazlı parametre değişkenleri için .env dosyalarını oluşturduk. Ayrıca Vuetify component ve Axios kütüphanelerini kullandık. Klasör yapımız aşağıdaki gibidir.

Assets: Assets dizini, stilleriniz, resimleriniz veya yazı tipleriniz gibi derlenmemiş varlıklarınızı içerir.

Enums: Enumlarımızı içeren klasör.

Static: Statik dizin büyük olasılıkla değiştirilmeyecek dosyaları içerir. Örnek olarak bu dizine uygulamaya ait bir logo resmi (logo.png) eklenebilir. Bu logoya eklemek istediğiniz sayfada aşağıdaki yöntem ile erişebilirsiniz.

<v-img src="/logo.png"></v-img>

Static dizinindeki dosyalara http://localhost:3000/logo.png ile url üzerinden de erişilebilir.

Store: Bu dizin Vuex Store dosyalarınızı içerir. Vuex state (durum) yönetimini merkezi bir yerden yönetilmesini sağlar. Vuex Store default olarak devre dışı oluşur. Aktiflemek için bu dizinde bir dosya oluşturmak yeterlidir.

Layouts: Bu dizin, layout dosyalarınızı içerir. Layout, sayfaların genel yapısını yönetmeyi sağlar. Örneğin, her sayfanın soluna bir menü eklemek için kullanılabilir. Farklı durumlar için farklı layoutlar oluşturabiliriz.

Biz default gelen layouta ek olarak, login sayfasında bir menü olmayacağı için empty, hata durumları için de error layoutlarını oluşturduk. Bir sayfaya özel layout tanımlamak aşağıdaki şekilde yapılabilir.

Layout içindeki <Nuxt /> etiketi ile işaretlenen yere layoutu eklediğimiz sayfanın içeriği dinamik olarak yerleşir. Örnek bir layout aşağıdaki gibidir.

empty.vue:

<template>
  <v-app primary>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

Pages: Nuxt bu klasör içindeki .vue uzantılı dosyaları okur ve sayfa yönlendirmelerini(routing) oluşturulan dosya ismiyle otomatik şekilde gerçekleştirir.

Örneğin; change-password sayfası için http://localhost:3000/change-password linkine giderek ulaşılabilir. Bu yöntem otomatik olarak Nuxt tarafından yapılmaktadır.

Components: Bir defa oluşturup sonradan kullanmak üzere hazırda beklettiğimiz yapılara Vue Component (bileşen) diyoruz. Bu sayede kod tekrarını azaltmış oluyoruz. Nuxt bu klasörü okuyarak bileşenlerinizi koda dahil etmenizi kolaylaştır.

Page ve component arasındaki veri aktarımı Vue yöntemleri ile yapılır.

Örnek: Props, Watch, Created…

Plugins: Kök Vue.js uygulamasını başlatmadan önce çalıştırmak istediğiniz Javascript eklentilerinizi içerir. Bu, oluşturduğunuz herhangi bir eklentinin, ana uygulama çalışmaya başlamadan önce içe aktarılacağı anlamına gelir.

Neden plugins leri kullanıyoruz?
Örneğin api.js dosyası projemizde sayfalarımızda kullanılan rest isteklerini tek bir yerden yönetmek için oluşturulmuştur.

Burada gördüğünüz kod ile back-end istekleri ayarlanır ve istek gönderilir. Bu servisler page veya componentlerde aşağıdaki gibi çağrılır.

this.$apiServices
        .tckInquiry(this.firstname, this.lastname, this.tckn, this.date)
        .then(() => {
          this.$toast.success(this.$t("Tck is verified."));
        })
        .catch(({ response }) => {
          this.$toast.error(response.data.ErrorMessage);
        });

Burada görüldüğü üzere pluginste belirtilen isimle($apiServices) metodlar çağrılmıştır.

api.js plugininde Rest isteği yapmak için kullanılan (context.$axios.post()) HTTP client Axios’tur. Rest isteğinin her istekte gerekli olan yapılandırma işlemleri, örneğin header bilgisi, token bilgisi ve baseUrl gibi bilgilerin doldurulma işlemleri yukarıda da görüldüğü üzere farklı bir plugin olan axios.js içinde yapılmıştır.

axios.js:

export default function ({ $axios, redirect}) {
  $axios.onRequest((config) => {
    let token = "xxxxxxx";

    config.headers = {
      "Cache-Control":"no-cache, no-store, must-revalidate",
      "Pragma":"no-cache",
      "Expires":"-1",
      "Content-Type": "application/json",
      Accept: "application/json",
      Language: "tr-TR",
      SessionToken: sessionStorage.getItem("xxxxx"),
      token: token,
    };
  });
  $axios.setBaseURL(process.env.BASE_URL);

  $axios.onError((error) => {
    if (error.response.status === 500) {
      redirect("/error");
    }
  });
}

Middleware: Bu klasör, middleware dosyalarınızı içerir. Middlewareler, bir sayfa render edilmeden önce çalıştırılan işlemlerdir. Middlewareler her sayfaya özel eklenebilir ya da default olarak tanımlanabilir.

Middlewareleri her sayfada gerekli olan rol ve session kontrolü için kullandık. Default olarak role middlewareini tanımladık.

session.js (Session Kontrolü)

export default async function (context) {
  await context.$apiServices.checkSession().catch((error) => {
    context.redirect("/login");
  });
}

Session kontrolü yapması için oluşturulan bir middlewaredir. Görüldüğü üzere Rest isteği ile session kontrolü yapılmıştır. Eğer session yoksa login sayfasına yönlendirme yapılır. Sayfalarda middleware tanımlaması aşağıdaki gibi yapılabilir.

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6"> </v-col>
  </v-row>
</template>

<script>
export default {
  name: "IndexPage",
  middleware: "session",
};
</script>

role.js (Rol Kontrolü)

var session = require("./session");
export default async function ({ route }) {
  session.default($nuxt.$options.context);

  if (route.meta[0].route !== undefined) {
    let roles = route.meta[0].route.role;
    let userRole = "";
    if (sessionStorage.getItem("xxx") !== null)
      userRole = sessionStorage.getItem("xxx");
    if (!roles.includes(userRole)) {
      throw { statusCode: 404 };
    }
  }
}

Bu middleware sayfaların hangi roller tarafından görülebileceğini belirleyerek sayfanın görüntülenmesini sağlar. Roller her sayfanın içinde bulunan meta tagı ile verilmiştir. Kodda da görüldüğü üzere bu meta taglarını kontrol ederek yetkilendirmeyi sağlar. Aynı zamanda bu middleware default middleware olarak tanımlandığı için session kontolünü de sağlamaktadır. Rol kontrolü gerekli olmayan sayfalar olduğu için session kontrolü ayrı bir middleware olarak tasarlanmıştır.

Sayfalarda tanımlanan meta tagları aşağıdaki gibidir:

export default {
  meta: {
    route: {
      role: [
        "ADMIN",
        "USER",
      ],
    },
  }
}

Nuxt.config.js

Projenin konfigürasyonlarının yapıldığı dosyasıdır. Bu dosyada oluşturulan pluginler, kullanılan npm paketleri, default middleware tanımlamaları, kullanılan paketlerin konfigürasyonları(axios ve tema ayarı gibi) yapılabilir. Örnek bir nuxt.config.js dosyası aşağıdadır.

export default {
  router: {
    middleware: "role", //Default middleware tanımlaması bu şekildedir.
  },
  ssr: false,
  head: {
    titleTemplate: "titleTeplate",
    title: "title",
    htmlAttrs: {
      lang: "tr",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },
  css: [],
  plugins: [ //Plugins tanımlamaları bu şekilde yapılır.
    "./plugins/axios.js",
    "./plugins/api.js",
    "./plugins/helper.js",
    "./plugins/downloadExcel.js",
  ],
  components: true,
  buildModules: [
    "@nuxtjs/vuetify",
  ],
  modules: ["@nuxtjs/axios"],//Kullanılan paketler buradadır.
  axios: {//Konfigürasyonları bu şekilde yapılabilir.
    proxy: true,
    credentials: false,
  },
  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      options: {
        customProperties: true,
      },
      light: true,
      themes: {//Tema ayarı buradan yapılabilir.
        light: {
          primary: "#367588",
        },
      },
    },
  },
};

Makalemizin sonucunda NuxtJS kullanılarak bir uygulama nasıl yapılır deneyimlemiş olduk. Umarım faydalı bir yazı olmuştur. Katkılarından dolayı Mert AKKAYA ve Enes BABAOĞLU’na teşekkür ederim.

Kaynakça

https://nuxtjs.org/