NuxtJS

Saya melakukan perubahan pada github pages yang sebelumnya menggunakan VueJS, menjadi NuxtJS. Memang tidak jauh berbeda. NuxtJS merupakan framework VueJS dimana pada NuxtJS kita lebih dimudahkan menggunakan API yang ada pada VueJS. Disini akan saya jabarkan sedikit beberapa hal yang menurut saya kelebihan menggunakan NuxtJS.

Routing

Di NuxtJS tidak perlu memikirkan konfigurasi routing. Cukup membuat file .vue pada directory pages, itu sudah menjadi route. Contohnya apabila kita ingin membuat route /about, maka buat file about.vue pada directory pages.

Setelah membuat pages, bagaimana cara mengakses route yang dihasilkan? Apabila pada VueJS menggunakan tag <router-link>, pada NuxtJS menggunakan <NuxtLink>.

Pada route biasanya kita membuat link dengan parameter. Contohnya pada halaman blog yang biasanya memiliki link /blog/judul-blog. Maka, kita perlu membuat sub directory pada pages terlebih dahulu menjadi pages/blog. Didalam directory tersebut, tambahkan file .vue sesuai nama parameter yang diinginkan, misal _slug.vue. Sehingga struktur folder menjadi /pages/blog/_slug.vue. Lebih lengkap bisa dilihat pada https://nuxtjs.org/docs/get-started/routing.

Content

Content merupakan hal yang paling bermanfaat buat saya. Menggunakan Content NuxtJS kita bisa membuat berita, artikel, halaman project dan sebagainya menggunakan file markdown. Dulu pada saat masih menggunakan VueJS, saya kesulitan untuk mengatur struktur content dan cara import nya ke. Menggunakan NuxtJS, cukup buat konten pada folder content.

Saya menggunakan file markdown (.md) sebagai content blog dan project. Selain markdown, NuxtJS Content juga support beberapa file. Untuk lebih lengkap, dapat dibaca pada dokumentasi Content NuxtJs https://nuxtjs.org/tutorials/creating-blog-with-nuxt-content/#adding-a-code-block-to-your-post

Fitur menarik pada Content yang saya suka yaitu edit content dan query builder.

Edit Content

Edit content secara manual bisa dengan mengedit file markdown yang ada. Tetapi, ketika membuka content pada aplikasi pada mode development, kita langsung bisa mengedit content cukup dengan klik 2x content tersebut. Akan langsung muncul text raw dari file markdown dan bisa langsung di save dari browser!

Fitur ini sangat berguna untuk mengedit cepat atau mengedit sedikit bagian. Karena jika mengedit melalui raw text yang muncul dari browser, sulit untuk mem-preview nya (atau saya yang tidak tahu? :D).

Edit konten secara keseluruhan memang lebih nyaman untuk saya di code editor saja. Saya menggunakan VS Code. VS Code memiliki fitur edit markdown file dan live preview sehingga kita dapat langsung melihat hasil dari file markdown yang kita buat.

Query Builder

Query Builder pada NuxtJs Content sudah terbilang lengkap. Hampir semua studi kasus dapat ditangani dengan query builder. Lebih lengkap dokumentasi dari query builder dapat dilihat di link ini https://content.nuxtjs.org/fetching.

Contoh query yang saya gunakan untuk menampilkan list article adalah sebagai berikut.

const articles = await $content('articles')
  .only(['title', 'description', 'img', 'slug', 'author', 'createdAt', 'date'])
  .sortBy('date', 'desc')
  .limit(5)
  .fetch()

Dari query diatas pasti sudah dapat dipahami apa dan bagaimana data yang diinginkan.

Component

Fitur menarik pada NuxtJS Component buat saya adalah auto import component. Pada VueJS, jika ingin menggunakan custom component kita perlu menginisialisasinya pada tempat dimana kita memanggilnya.

<template>
  <div>
    <TheNavbar />
  </div>
</template>

<script>
import TheNavbar from './component/TheNavbar.vue'
export default {
  components: {
    TheNavbar
  }
}
</script>

Pada NuxtJs Component, kita tidak perlu import component. Namun ada beberapa hal yang perlu diperhatikan supaya component dapat diimport otomatis dengan benar. Lebih jelasnya bisa dilihat pada dokumentasi NuxtJS Component https://nuxtjs.org/directory-structure/components

Nuxt SSR

SSR atau Server Side Rendering bagi saya fitur yang menarik dari NuxtJS. Ketika mem-build project dengan command nuxt generate, hasil build akan memiliki struktur folder mengikuti routing yang kita buat pada project. Hal ini menurut banyak orang "lebih SEO" atau lebih mudah di-crawl atau dibaca oleh mesin pencari.

Tentunya sangat berbeda dengan hasil build tanpa SSR (seperti ketika saya menggunakan VueJS sebelumnya). Proses build hanya akan menghasilkan satu buah file .html karena akses ke route lainnya hanya bisa dilakukan menggunakan javascript. Yang saya alami ketika tanpa SSR, user tidak bisa langsung mengakses url halaman, misalnya /about (jika dihosting pada static server seperti github pages).

Hal menarik lainnya dari server side rendering NuxtJS adalah pada hasil build, kita dapat melihat pada file html sudah terdapat data. Maksudnya, pada halaman index blog, kita menampilkan list artikel menggunakan fungsi javascript. Jika tidak menggunakan ssr, hasil build tidak me-render data yang diambil dari javascript. Itu berkat fungsi asyncData pada NuxtJS.