Setelah Februari lalu Vue 3 resmi menjadi versi bawaan yang baru, Nuxt sebagai framework populer berbasis Vue nggak mau ketinggalan buat melakukan migrasi besar-besaran.
Bukan sekadar mengikuti tren Vue, Nuxt 3 hadir membawa banyak banget fitur baru yang siap memanjakan developer experience (DX) dan bikin pekerjaan koding kita jadi jauh lebih ringan.
Pada kesempatan kali ini, kita bakal mengulas seputar rilis Nuxt 3, fitur-fitur canggih apa saja yang diusung, dan apakah kalian sudah harus bersiap-siap buat migrasi? Yuk, kita bahas bareng-bareng! 😄
Poin Penting
- Nuxt 3 berbasis Vue 3 dengan Composition API dan dukungan TypeScript secara bawaan.
- Mengadopsi Vite sebagai bundler default yang membuat proses development jauh lebih cepat dibanding Webpack.
- Server engine baru bernama Nitro memungkinkan output build yang super ringan tanpa ketergantungan node_modules.
Status Nuxt 3 Saat Ini
Saat artikel ini ditulis, Nuxt 3 sedang berada di tahap Release Candidate ke-3 (RC 3). Artinya, versi ini nggak bakal menerima perubahan besar lagi, melainkan fokus pada perbaikan minor dan stabilitas menjelang rilis final.
Kalau mengintip roadmap di situs resmi mereka, Nuxt 3 versi stabil dijadwalkan meluncur sekitar bulan Juni 2022 ini.
Meskipun statusnya masih 'kandidat', Nuxt 3 saat ini sebenarnya sudah sangat fungsional, cukup stabil, dan seru banget buat dicoba—tapi disarankan jangan dipakai di lingkungan produksi dulu ya!
Sejalan dengan pengembangan versi barunya, modul-modul inti (core modules) seperti Content, Auth, dan Image juga sedang ikut berbenah. Bahkan, Nuxt Content v2 sudah curi start rilis duluan sejak 24 Mei kemarin.
Fitur-fitur Baru yang Bikin Ngiler
Transisi dari Nuxt 2 ke Nuxt 3 bisa dibilang sebagai lompatan yang sangat jauh. Saking banyaknya perubahan mendasar, tim pengembang Nuxt sampai harus menulis ulang seluruh codebase dari nol dengan teknologi baru.
Kira-kira seberapa dahsyat perubahannya? Berikut adalah deretan fitur andalan yang hadir di Nuxt 3:
Vue 3 dan TypeScript secara Bawaan
Karena Nuxt 3 berdiri di atas Vue 3, sebagai 'framework-nya framework', dia otomatis membawa semua kelebihan yang ada pada Vue 3. Beberapa di antaranya meliputi:
- Composition API — gaya penulisan kode yang lebih modular dan gampang dibagikan lewat composables.
- TypeScript — dukungan penulisan tipe data statis yang langsung aktif tanpa perlu konfigurasi ribet lagi.
- Performa Lebih Ngebut — rendering halaman diklaim lebih cepat sampai 55%, ukuran bundle terpangkas hingga 41%, dan penggunaan memori RAM lebih hemat sampai 54%.
Berhubung Vue 3 kini condong menggunakan TypeScript secara bawaan, Nuxt pun ikut menyesuaikan diri. Langkah adaptasi ini nggak main-main, karena seluruh kode inti Nuxt 3 akhirnya ditulis ulang menggunakan TypeScript. Berbeda dari Nuxt 2 yang didominasi oleh JavaScript biasa, kini proporsi repositori resminya hampir seluruhnya beralih ke TypeScript.
📷 Ilustrasi: grafik perbandingan komposisi bahasa pemrograman antara Nuxt 2 berbasis JavaScript dan Nuxt 3 berbasis TypeScript.
Fitur static typing yang dibawa TypeScript bikin proyek Nuxt kalian jadi lebih mudah dikelola saat ukurannya mulai membesar. Ditambah lagi dengan dukungan fitur editor seperti auto-completion dan IntelliSense yang aktif, pengalaman koding jadi terasa makin mulus.
Vite sebagai Bundler Utama
Sama seperti Vue 3, Nuxt 3 kini membawa dukungan penuh untuk Vite sebagai module bundler bawaannya, menggantikan Webpack yang dipakai di versi terdahulu.
Hasilnya? Proses build dan hot module replacement pas koding berjalan jadi super cepat, hampir instan! Ukuran berkas akhirnya juga relatif lebih kecil dibandingkan hasil kompilasi Webpack.
Tapi buat kalian yang masih setia atau butuh Webpack, tenang saja. Nuxt 3 tetap menyediakan opsi buat menggunakan Webpack 5 dengan konfigurasi yang nggak kalah mudah.
Auto Import yang Praktis
Aktivitas mengimpor komponen atau fungsi bantuan sering kali memenuhi baris kode paling atas, terutama pada proyek Nuxt yang kompleks.
Biar koding makin efisien, Nuxt 3 merilis fitur Auto Import yang canggih.
Berkat fitur ini, kalian nggak perlu lagi menuliskan baris import secara manual tiap kali mau memakai komponen atau fungsi bantuan. Tinggal panggil namanya, dan Nuxt bakal mendeteksinya secara otomatis di balik layar.
Fitur auto import ini bekerja untuk helper functions, komponen, composables, plugin, hingga API bawaan Vue.
Kerennya lagi, ini nggak seperti variabel global biasa. Editor kalian akan tetap mengenali jenis komponen tersebut, sehingga fitur IntelliSense dan sugerensi kode tetap aktif membantu koding kalian.
Server Engine Baru Bernama Nitro
Salah satu lompatan terbesar di Nuxt 3 adalah kehadiran mesin server (server engine) baru yang dinamai Nitro.
Nitro adalah proyek sumber terbuka di bawah naungan ekosistem UnJS, dikembangkan bersama library lainnya seperti h3.
Nitro memungkinkan server Nuxt kalian berjalan secara mandiri tanpa memerlukan folder node_modules lagi di lingkungan produksi. Ini berbeda jauh dengan versi sebelumnya yang sangat bergantung pada dependensi tersebut.
Semua kode program, pustaka pihak ketiga, dan hasil kompilasi bakal dikemas rapi ke dalam folder .output. Folder ini siap kalian jalankan langsung di Node.js maupun layanan service worker seperti Cloudflare Workers tanpa perlu menjalankan perintah npm install lagi.
Bagaimana? Keren banget kan arsitektur barunya? 😎
Sudah Siap Mencoba Nuxt 3?
Itu dia beberapa fitur revolusioner yang diusung oleh Nuxt 3. Kita tinggal menunggu saja tanggal peluncuran resminya dalam waktu dekat.
Bagaimana dengan kalian? Sudah ada rencana buat membangun proyek baru menggunakan Nuxt 3? Atau malah sudah bersiap melakukan migrasi proyek lama?
Untuk informasi lebih lengkap dan dokumentasi resmi, kalian bisa langsung mengunjungi situs Nuxt 3.
Selamat berkoding ria 👋