Berkenalan Dengan NuxtJs - VueJS Framework Dengan Dukungan SSR

Jika pada reactjs ada nextjs maka pada vuejs terdapat nuxtjs, nuxtjs sendiri merupakan sebuah framework berbasis vuejs yang bisa kita gunakan untuk membuat sebuah website berbasis single page application, progressive web apps, desktop application, universal application dan lain sebagainya yang berhubungan dengan vuejs. Nuxtjs juga menggunakan library pendukung seperti vue router, vuex, vue server rendered dan vue meta. Dengan begitu anda tidak perlu lagi memasang library tersebut karena telah terpasang secara default, hal unik lainnya yaitu nuxtjs juga menyediakan starter pack dan module pendukung yang dibuat oleh komunitas untuk mendukung proses pengembangan nuxtjs.

Installation

Prerequisites:

1. Node.js
2. Text Editor
3. Terminal

Untuk membuat project Nuxt App, anda dapat menggunakan perintah :

Pastikan npx sudah terinstall dikomputer anda (Jika versi NPM kamu lebih besar dari 5.2.0, maka npx sudah otomatis terinstall).
Anda akan dihadapkan pertanyaan yang digenerate oleh create-nuxt-app, dan silahkan pilih sesuai dengan selera anda (tipe nuxt: Universal/SPA, Frontend Framework: Vueify, Bootstrap, dll; Integrasi dengan Linting, dll).

Struktur Direktori

1. Assets
Direktori assets merupakan direktori yang digunakan untuk menyimpan seluruh hal yang berkaitan dengan user interface, pada direktori ini tidak hanya berisikan CSS (Cescading Style Sheet) namun juga dapat berisikan gambar.  

2. Components
Direktori components merupakan direktori yang digunakan untuk menyimpan komponen - komponen halaman, komponen halaman pada direktori ini akan digunakan kembali pada file - file yang terdapat pada direktori pages. Pada direktori ini aksi sync dan async tidak dapat dijalankan.

3. Layouts
Direktori layouts merupakan direktori yang digunakan untuk membuat sebuah layout pada sebuah halaman, sama halnya dengan direktori components direktori ini juga digunakan pada file - file yang terdapat pada direktori pages.

4. Middleware
Direktori middleware merupakan direktori yang digunakan untuk membuat sebuah aturan atau fungsi yang dijalankan sebelum sebuah halaman ataupun layout di render pada sisi server. Middleware dapat digunakan secara global pada file nuxt.config.js ataupun secara individu pada file - file yang terdapat pada direktori pages.

5. Pages
Direktori pages merupakan direktori yang digunakan untuk membuat sebuah halaman, pada direktori ini sync dan async dapat digunakan sehingga anda dapat melakukan pengambilan data terlebih dahulu melalui API yang disediakan dengan bantuan axios atau lainnya sebelum melakukan rendering. Direktori ini juga berfungsi secara otomatis dalam membuat sebuah routing, sehingga anda tidak perlu lagi membuat file routing secara terpisah.

6. Plugin
Direktori plugin merupakan direktori yang digunakan untuk memanggil sebuah packages ataupun membuat sebuah fungsi custom sebelum fungsi Vue.JS dijalankan.

7. Static
Direktori static merupakan direktori yang digunakan untuk menyimpan file - file yang bersifat statis, direktori ini dapat ditempatkan file - file seperti robots.txt, file verifikasi kepemilikan website, favicon dan lain sebagainya.

8. Store
Direktori store merupakan direktori yang digunakan untuk menggunakan vuex, secara default direktori ini tidak akan digunakan namun anda dapat menggunakannya dengan membuat file dengan nama index.js