Mengenal Nuxt JS, Framework Berbasis JavaScript Terbaru

Last Updated on October 22, 2021 by

Pernahkah Anda mendengar Nuxt JS? Seperti nama belakangnya, Nuxt adalah framework yang berbasis bahasa pemrograman JavaScript. Nuxt JS bukanlah framework yang baru muncul. Framework ini sudah ada sejak tahun 2016 dan sudah memperoleh lisensi MIT.

Saat menggunakan framework ini, Anda bisa menciptakan aplikasi yang bisa bekerja di berbagai platform (lintas platform). Jika Anda adalah seorang developer Vue.js, Anda pasti sudah tahu tentang Nuxt.

Untuk Anda yang belum tahu tentang Nuxt dan penasaran tentangnya, simak terus artikel berikut ini sampai akhir!

Apa itu Nuxt JS? : Mengenal Nuxt lebih Dekat

Nuxt JS adalah framework tingkat tinggi yang dibangun di atas Vue. Sederhananya, Nuxt.js adalah framework yang akan membantu Anda untuk membangun aplikasi Vue.js dengan mudah dari sisi developing dan rendering-nya.

Nuxt bekerja dengan mengabstraksi sebagian besar konfigurasi yang rumit dan kompleks di mana ia terlibat dalam mengelola hal-hal seperti data yang tidak sinkron, middleware, dan routing. Cara kerja ini sangat mirip dengan Angular Universal.

Selain itu, Nuxt JS memiliki fitur yang bisa membantu Anda untuk membangun website statis dengan mengenerasikan perintah (command). Kemampuan Nuxt ini sangat luar biasa dan menyediakan tools untuk membangun static generation seperti yang ada pada Jekyll.

Cara Kerja Nuxt JS

Nuxt.js mencakup beberapa hal seperti vue-router. Hal ini mirip dengan yang ada di Vue.js 2.0. Nuxt.js juga mencakup pada VueX yang mana ini termasuk saat menggunakan opsi store. Selain itu, Nuxt memiliki opsi Vue server renderer dan vue-meta.

Hal ini sangat bagus, karena ia mampu menghilangkan beban secara manual termasuk dan mengkonfigurasi pustaka yang berbeda yang diperlukan untuk mengembangkan aplikasi vue.js yang diberikan server. Nuxt.js melakukan semua ini di luar kotak, sementara masih mempertahankan ukuran total 57kb min + gzip (60kb dengan vuex).

Nuxt.js juga menggunakan webpack dengan vue-loader dan Babel-loader untuk bundel, kode-split dan kode minify. Lebih lanjut kami akan menjelaskan cara kerja Nuxt di bawah ini.

Inilah yang terjadi ketika pengguna mengunjungi aplikasi Nuxt.js atau menavigasi ke salah satu halamannya melalui <nuxt-link>:

1. Ketika pengguna awalnya mengunjungi aplikasi, jika tindakan nuxtserverinit didefinisikan di toko, nuxt.js akan menyebutnya dan memperbarui toko.
2. Selanjutnya, hal ini akan mengeksekusi middleware yang ada untuk halaman yang sedang dikunjungi. Nuxt memeriksa file nuxt.config.j terlebih dahulu untuk middleware global, kemudian memeriksa file tata letak yang cocok (untuk halaman yang diminta), dan akhirnya memeriksa halaman dan anak-anaknya untuk middleware. Middleware diprioritaskan dalam urutan itu.
3. Jika rute yang dikunjungi adalah rute dinamis, dan metode validasi ada untuk itu memvalidasi rute.
4. Kemudian, nuxt.js memanggil metode ASYNCDATA dan fetch untuk memuat data sebelum merender halaman. Metode ASYNCDATA digunakan untuk mengambil data dan merendernya di sisi server, sedangkan metode Fetch digunakan untuk mengisi toko sebelum membuat halaman.
5. Pada langkah terakhir, halaman (berisi semua data yang tepat) diberikan.

Keunggulan Nuxt JS

Pada segmen ini, kami akan menjelaskan beberapa keunggulan yang dimiliki oleh Nuxt sebagai Framework yang membantu Anda untuk membuat aplikasi. Inilah keunggulan Nuxt JS

1. Anda dapat membuat aplikasi universal tanpa ribet

Aplikasi universal adalah aplikasi yang berguna untuk mendeskripsikan kode JavaScript yang bisa dieksekusi baik dengan client (klien) maupun server side (sisi server). Selain itu, Nuxt juga membantu Anda menulis kode aplikasi universal dengan lebih sederhana.

Ketika Anda membuat aplikasi dengan Vue, hal tersebut menjadi lebih rumit. Oleh karena itu, Nuxt dapat membantu Anda mempermudah pembuatan aplikasi universal ini.

2. Merender Aplikasi Vue dengan Mudah

Anda bisa merender aplikasi Vue Anda dengan mudah serta mendapatkan semua manfaat dari aplikasi universal tanpa server apapun. Hal ini dapat dilakukan karena Nuxt dilengkapi dengan inovasi besar berupa Nuxt Command. Perintah ini pun mampu membuat situs web statis sepenuhnya.

3. Anda bisa mendapatkan pemisah kode otomatis pada halaman pre-rendered

Hanya dengan melakukan konfigurasi webpack khusus Nuxt.js dapat menghasilkan situs web versi statis. Untuk setiap rute (halaman) yang dihasilkan secara statis, rute tersebut juga akan mendapatkan file Javascript sendiri, hanya dengan kode yang diperlukan untuk menjalankan rute tersebut.

4. Nuxt JS menyediakan Starter-Template

Untuk Anda yang masih pemula, Anda bisa melakukan setup melalui baris perintah dengan starter-template. Nuxt.js menyediakan template yang disebut Starter-Template yang memberi Anda semua tools yang Anda butuhkan untuk memulai dengan proyek dengan struktur folder yang baik untuk organisasi tersebut.

5. Dapatkan Struktur Proyek secara Default

Dalam banyak aplikasi Vue kecil Anda dapat mengelola struktur kode sebaik yang Anda bisa dalam beberapa file. Struktur aplikasi Nuxt.js default memberi awal yang bagus untuk mengatur aplikasi Anda dengan mudah.

6. Bisa mengatur transisi di antara rute dengan mudah

Vue memiliki elemen wrapper <Transition> yang membuatnya mudah untuk menangani animasi javascript, animasi CSS, dan transisi CSS pada elemen atau komponen Anda. Jika Anda memerlukan pembaruan pada elemen <Transition> Vue dan transisi secara umum.

Nuxt.js melakukan pengaturan rute-rute Anda sedemikian rupa sehingga setiap halaman dibungkus dengan elemen <Transition> sehingga Anda dapat membuat transisi antar halaman dengan sederhana.

7. Anda bisa menulis komponen file tunggal dengan mudah

Dalam banyak proyek Vue kecil, komponen ini dapat didefinisikan menggunakan Vue.Component, diikuti oleh Vue baru ({El: ‘#container’}) untuk menargetkan elemen container di seluruh halaman. Nuxt JS pun dapat bekerja dengan baik untuk proyek-proyek kecil di mana JavaScript hanya digunakan untuk meningkatkan tampilan tertentu.

Namun sayangnya, Nuxt akan sulit dikelola jika Anda ingin membuat proyek yang lebih besar. Semua masalah ini pun dapat diselesaikan dengan komponen file tunggal dengan ekstensi .vue. Untuk menggunakannya, Anda harus mengatur proses pembuatan dengan alat-alat seperti Webpack dan Babel.

8. Dapatkan kompilasi ES6 / ES7 tanpa ribet

Selain Webpack, Nuxt.js juga bisa digunakan dengan pre-package Babel. Babel dapat membuat susunan versi Javascript terbaru seperti ES6 dan ES7 ke dalam JavaScript yang dapat dijalankan pada browser yang lebih lama. Nuxt.js dapat mengatur Babel untuk Anda sehingga semua file .vue dan semua kode ES6 yang Anda tulis di dalam tag <Script> mampu mengkompilasi ke dalam JavaScript yang akan berfungsi pada semua browser.

9. Dapatkan Pengaturan dengan Server Pembaruan Otomatis untuk Pengembangan Aplikasi dengan Mudah

Dibandingkan dengan menyiapkan proses ini sendiri atau proses refresh serta berbagai perubahan  yang digunakan pengembang web, berkembang dengan Nuxt.js sangat mudah. Pengaturan ini dapat mempermudah pekerjaan Anda dengan server pengembangan otomatis.

Saat Anda sedang mengembangkan dan mengerjakan file. Vue, nuxt.js menggunakan konfigurasi webpack untuk memeriksa perubahan dan mengkompilasi semuanya. Anda pun dapat menjalankan perintah NPM Run dev di dalam proyek Nuxt.js dan  mengatur server pengembangan.

10. Anda bisa mengakses semua tools di komunitas Nuxt.js

Terakhir, ada koleksi GitHub yang disebut Komunitas Nuxt yang menyusun library, modul, starter kit, dan berbagai tools lainnya untuk membuatnya lebih mudah untuk membuat aplikasi Anda.

Apakah Anda tertarik menggunakan Nuxt.js? Jika Anda tertarik menggunakan Nuxt.js lihatlah cara Instal Nuxt.js.

Cara Instal Nuxt.js

Ada dua acara untuk menginstal Nuxt.js secara online dan manual. Pada artikel kali ini Web App akan membahas instalasi manual dari Nuxt.js.

1. Set-up proyek Anda

Buatlah sebuah empty directory (direktori kosong) dengan nama proyek Anda dan navigasikan ke dalamnya:

mkdir <project-name>
cd <project-name>

Ganti <Project-Name> Dengan nama proyek Anda. Kemudian buat file package.json:

touch package.json

Isi konten package.json dengan:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

Skrip menentukan perintah Nuxt yang akan diluncurkan dengan perintah NPM menjalankan <command> atau benang <command>.

Apa itu file pacakge.json?

Package.json seperti kartu ID proyek Anda. Ini berisi semua dependensi proyek dan banyak lagi. Jika Anda tidak tahu file package.json, kami sangat menyarankan Anda untuk membaca dengan cepat pada dokumentasi NPM di sini: https://docs.npmjs.com/cli/v7/configuring-npm/package-json/.

Setelah package.json telah dibuat, tambahkan Nuxt ke proyek Anda melalui NPM atau benang seperti di bawah ini:

YarnNPM
Yarn
yarn add nuxt

Perintah ini akan menambahkan Nuxt sebagai dependensi untuk proyek Anda dan menambahkannya ke paket Anda. Jon. Direktori node_modules juga akan dibuat yang merupakan tempat semua paket dan dependensi yang diinstal disimpan.

Inilah penjelasan tentang Nuxt JS yang perlu Anda ketahui. Ingin tahu lebih banyak tentang teknologi pengembangan website dan aplikasi, jangan lupa untuk kunjungi situs Web App di https://appkey.id/ dan nyalakan notifikasi agar Anda tidak ketinggalan informasi terbaru. Anda juga bisa download aplikasi Web App di Google Play Store.