Yang Baru di Nuxt 3: Nitro, Vite, dan Banyak Lagi

Setelah Februari lalu Vue 3 menjadi versi default yang baru. Nuxt, framework populer berbasis Vue tidak mau ketinggalan melakukan migrasi.

Lebih dari sekedar Vue. Seperti versi sebelumnya, Nuxt 3 akan hadir dengan fitur-fitur baru yang pastinya akan meningkatkan developer experience dan memudahkan pekerjaan kita.

Pada kesempatan kali ini kita akan membahas tentang rilis Nuxt 3, apa yang akan dibawa, dan kira-kira haruskah migrasi?

Status Nuxt 3 saat ini

Pada saat artikel ini ditulis, Nuxt 3 sedang ada pada release candidate ke-3. Ini artinya versi sekarang hanya akan menerima perubahan minor sampai nanti waktunya rilis.

Menurut roadmap di situs webnya, Nuxt 3 versi stabil akan rilis pada bulan ini (Juni 2022).

Terlepas dari versinya yang masih “kandidat”, Nuxt 3 saat ini sudah cukup fungsional, cukup stabil, dan siap di-test drive — asal jangan di lingkungan produksi.

Seiring dengan kandidat rilisnya, core module seperti Content, Auth, dan Image juga sedang melakukan migrasi. Bahkan Nuxt Content v2 sudah rilis lebih dulu pada 24 Mei lalu.

Fitur-fitur Baru

Versi 2 ke versi 3 bisa dibilang merupakan lompatan yang jauh. Bahkan, Nuxt 3 sampai perlu ditulis ulang dengan bahasa yang baru.

Kira-kira seberapa jauh lompatannya? Berikut ini ada beberapa fitur yang akan hadir pada Nuxt 3.

Vue 3 dan Typescript

Kita tahu jika Nuxt 3 berbasis pada Vue 3. Sebagai “framework dari framework”, Nuxt 3 pasti akan membawa semua fitur yang ada pada Vue 3 seperti:

• Composition API — penulisan script yang lebih modular dengan composable.
• Typescript — gaya penulisan statis bawaan dengan Typescript.
• Peningkatan Performa — peningkatan kecepatan render hingga 55%, ukuran bundle sampai 41% lebih kecil, dan penggunaan RAM lebih sedikit hingga 54%.

Karena Vue 3 sekarang menggunakan Typescript secara default, Nuxt juga harus menyesuaikan. Penyesuaian ini tidak main-main, sampai menyebabkan Nuxt harus ditulis ulang menggunakan Typescript.

Static typing yang ada pada Typescript membuat proyek Nuxt mudah diskalakan. Belum lagi dukungan IDE seperti intellisense dan autocompletion yang pastinya akan meningkatkan developer experience.

Vite dan Webpack

Seperti Vue 3, Nuxt 3 juga meghadirkan support untuk Vite secara default.

Rilis ini menghadirkan Vite sebagai module bundler utamanya, alih-alih menggunakan Webpack seperti pada versi sebelumnya.

Hasilnya adalah peningkatan kecepatan build dan bundle size yang relatif lebih kecil dibanding dengan Webpack.

Tidak suka Vite? Nuxt juga menghadirkan support untuk Webpack 5 yang bisa dikonfigurasi dengan mudah.

Auto Import

Kadang import-import ini bisa banyak sekali apalagi pada proyek Nuxt atau Vue yang tidak pernah lepas dengan component.

Untuk meningkatkan developer experience, Nuxt menghadirkan fitur Auto Import.

Dengan fitur ini kita tidak perlu repot untuk melakukan import secara eksplisit ketika component akan digunakan, semuanya tinggal pakai.

Auto import pada Nuxt bekerja pada helper function, component, composable, plugin, Vue API, dan lainnya.

Auto import ini tidak sama seperti global declaration. Dengan auto import, fungsi IDE seperti intellisense dan code completion akan tetap aktif.

Server Engine “Nitro”

Nuxt 3 menggunakan server engine baru yang diberi nama “Nitro”.

Nitro merupakan proyek open source di bawah ekosistem unjs, bersama h3 dan banyak tools lainnya.

Nitro memungkinkan Nuxt server untuk berdiri sendiri tanpa perlu ada node_modules. Tidak seperti versi sebelumnya yang memerlukan node_modules untuk berjalan.

Semua kode, dependensi, dan hasil bundle akan dioutputkan pada folder .output yang bisa dijalankan di lingkungan NodeJS mapun service worker tanpa perlu eksekusi npm install.

Gimana? Keren kan 😎

Sudah Siap Nuxt 3?

Jadi itu beberapa fitur yang akan datang di Nuxt 3. Kita tunggu saja tanggal rilisnya dalam waktu dekat.

Bagaimana, sudah ada rencana proyek baru? Atau mungkin sudah mulai migrasi?

Untuk info lebih lanjut langsung saja kunjungi website Nuxt 3.

Happy coding 👋