Nuxt JS: Pengertian, Cara Kerja, Kelebihan, Sampai Cara Menginstalnya

Pernahkah kalian mendengar istilah Nuxt JS? 

Nuxt JS adalah framework yang digunakan untuk membangun aplikasi atau web berbasis JavaScript. Ada banyak hal yang menarik untuk dikupas dari nuxt.js yang akan kami bahas pada artikel berikut ini, simak penjelasan lengkapnya!

Apa Itu Nuxt JS?

Nuxt JS adalah sebuah kerangka kerja open source atau gratis progresif yang digunakan untuk membuat website secara sederhana namun tetap optimal. Dengan framework ini, pengguna dapat membangun interface pada website dengan sistem komponen dari Vue JS.

Fungsi Nuxt JS adalah mempermudah pembuatan aplikasi VueJS dalam aspek rendering juga developing. Kerangka kerja ini menyederhanakan konfigurasi yang rumit seperti sinkronisasi, middleware, dan routing.

Fitur yang ada pada nuxt dapat mempermudah anda untuk membuat web statis dengan tools atau mengoperasikan commands.  Nuxt JS dilengkapi library seperti vue-router dan vueX. Nuxt juga memiliki dua opsi yaitu vue-meta dan vue server. Yang mana dengan fitur-fitur tersebut, kerangka kerja ini dapat mengkonfigurasi berbagai macam library untuk pengembangan aplikasi vue JS.

Selain itu, framework ini dilengkapi dengan berbagai macam alat pengembangan seperti vue-loader, babel-loader, dan kode minify. 

Baca Juga: (OOP) Object Oriented Programming dan Prinsip-Prinsipnya

Cara Kerja Nuxt JS

Nuxt akan bekerja seperti server-side framework ketika user mengunjungi suatu aplikasi atau web. Server akan me-render setiap request user ketika sisi rendering diaktifkan. Sementara itu, konten laman akan di render dengan JavaScript ketika rendering pada sisi klien diaktifkan. 

Berikut cara kerja Nuxt.js ketika user mengunjungi aplikasi nuxt atau menavigasikan halamannya melewati <nuxt-link>

1. Universal Mode

Framework satu ini memiliki kemampuan untuk menghasilkan aplikasi dengan basis Vue dari sisi server (SSR) ataupun klien (CSR). Dalama mode universal, ketika request diterima oleh server, Nuxt akan mengambil komponen yang sesuai kemudian merendernya ke dalam HTML dan mengirimkannya sebagai respon pada klien. 

2. Ruang Lingkup Proyek

Nuxt.js memiliki beberapa direktori yang penting meliputi:

• Assets: Berkas aset seperti gambar, dan lain sebagainya
• Components: Komponen Vue yang dapat digunakan kembali
• Layouts: Layouts untuk halaman aplikasi atau website 
• Pages: Halaman aplikasi yang diatur sesuai dengan URL route
• Store: Manajemen state global menggunakan Vuex
• Middleware: Fungsi yang dijalankan sebelum halaman dirender
• Plugins: Plugins yang ingin dijalankan sebelum inisialisasi aplikasi

3. Routing Dinamis

Kerangka kerja ini memperbolehkan anda untuk define rute dengan metode yang lebih dinamis. Nama Berkas pada direktori “pages” menghasilkan rute berdasarkan struktur folder dan nama berkas tersebut.

4. Server Middleware

Anda dapat menambahkan server middleware pada proyek nuxt untuk mengatur autentikasi ataupun mengambil data.

5. Async Data Fetching

Penggunaan metode async Data dapat mempermudah pengambilan data secara asynchronous sebelum halaman dirender.

6. Plugins dan Modules

Untuk mengatur ekstensi fungsi global anda dapat mengintegrasikan plugin pada nuxt.js. Sedangkan untuk memecah struktur proyek menjadi bagian yang dapat digunakan kembali, anda dapat mengintegrasikan modul pada nuxt.

7. Konfigurasi Mudah

Melalui berkas ‘nuxt.config.js’, anda bisa menemui berbagai opsi konfigurasi untuk kebutuhan proyek anda.

8. Build dan Deployment

Proyek Nuxt.js dapat diupgrade menjadi berkas statis yang dioptimasi dengan memakai perintah ‘nuxt build’ dan menjalankan server dengan perintah ,nuxt start’.

Kelebihan Nuxt JS

Berikut ini kami uraikan beberapa kelebihan dari nuxt.js: 

1. Mempermudah Proses Pengembangan Aplikasi

Dengan pengaturan dan pembaruan server otomatis, Nuxt dapat menyederhanakan proses application development dengan pengaturan dan update server secara otomatis. Untuk mengecek perubahan file, nuxt menggunakan konfigurasi webpack loader. 

2. Meningkatkan SEO

Nuxt JS dapat meningkatkan Search Engine Optimization (SEO) karena framework ini dapat merender dari sisi server.

3. Mempermudah Pembuatan Aplikasi Universal 

Pembuatan aplikasi dengan menggunakan nuxt.js dapat dilakukan dengan mudah karena terdapat akses ke properti IsClient dan IsServer untuk melakukan proses render.

4. Mempermudah Proses Render Aplikasi Vue 

Selain SSR, Nuxt.js juga mendukung pre-rendering. Ini berarti bahwa Anda dapat merender halaman-halaman statis sebelumnya, yang dapat berguna untuk menghadirkan kinerja lebih cepat dan mengurangi beban server.

5. Mendapatkan Starter-Template

Template yang disediakan oleh Nuxt.js berisi sejumlah alat yang diperlukan untuk memulai proyek dengan struktur folder yang proper.

6. Mempermudah Pengaturan Transisi antar Rute

Nuxt.js menyediakan sistem routing yang otomatis terkonfigurasi berdasarkan struktur direktori yang membuat pengaturan rute menjadi lebih mudah dan lebih intuitif.

7. Komunikasi yang Aktif

Nuxt.js memiliki komunitas yang aktif, sehingga memudahkan anda menemukan solusi untuk masalah yang mungkin dihadapi atau sekedar berbagi pengetahuan dengan para pengembang lainnya.

8. Mempermudah Dokumentasi

Nuxt.js memiliki dokumentasi yang lengkap dan mudah diikuti, sehingga memudahkan pengembang untuk mempelajari dan menggunakan framework ini.

9. Pengelolaan State yang Mudah

Nuxt.js memiliki integrasi bawaan dengan Vuex, library untuk pengelolaan state di Vue.js. Sehingga membantu anda mengelola keadaan aplikasi dengan lebih terstruktur dan efisien.

10. Mendapatkan Pemisah Kode Otomatis Pada Halaman Pre-rendered

Selain SSR, Nuxt.js juga mendukung pre-rendering. Dimana anda dapat merender halaman-halaman statis sebelumnya untuk menghadirkan kinerja lebih cepat dan mengurangi beban server.

Cara Install Nuxt JS

Untuk menginstall nuxt.js ada dua cara manual, berikut penjelasannya:

1. Set-Up Proyek

Buat empty directory dengan nama proyek anda kemudian navigasikan ke dalamnya:

Ganti <Project-Name> sesuai dengan proyek anda. Selanjutnya buat file package.json:

Isi konten package.json dengan:

Kemudian, tambahkan nuxt pada proyek anda melwati NPM setelah package.json selesai dibuat.

2. NPM

• Jika belum memiliki node.js dan npm, anda harus mengunduhnya terlebih dahulu
• Buka terminal atau command prompt, lalu buat direktori untuk proyek Anda dan masuk ke dalamnya

• Nuxt.js menyediakan utilitas npx yang memungkinkan anda menjalankan perintah dari paket npm tanpa perlu menginstalnya secara global. Ketik perintah berikut untuk membuat proyek Nuxt.js baru

Perintah di atas akan memandu anda melalui proses konfigurasi proyek Nuxt.js. Perlu diingat bahwa titik pada akhir perintah menandakan bahwa anda ingin membuat proyek di direktori saat ini.

• Jalankan server pengembangan setelah proses instalasi selesai dengan perintah ini:

Dengan ini server pengembangan akan dimulai dan anda dapat mementau proyek Nuxt JS anda.

Baca Juga: Debugging, Sejarah, Fungsi, dan Cara Kerjanya

Next JS VS Nuxt JS

Walaupun Next JS dan Nuxt JS memiliki kemiripan, namun keduanya memiliki perbedaan dalam beberapa aspek. Berikut perbedaannya: