July 21, 2025

Nuxia

🚀 Nuxt 4.0 Resmi Dirilis

Nuxt 4.0 dirilis resmi pada 15 Juli 2025 setelah lebih dari setahun dalam fase uji kompatibilitas. Ini adalah major release yang menitikberatkan pada stabilitas dan penginkatan developer experience -meski ada beberapa perubahan yang bersifat breaking, tim Nuxt berusaha menjaga jalur migrasi sehalus mungkin.


📂 1. Struktur Proyek Baru: app/ Directory

  • Aplikasi kini ditempatkan dalam folder app/, memisahkan kode dari node_modules/ dan .git/, sehingga mempercepat file watchers (terutama pada Windows & Linux).
  • Struktur defaultnya:
    my-nuxt-app/
    ├─ app/
    │  ├─ assets/
    │  ├─ components/
    │  ├─ pages/
    │  ├─ layouts/
    │  ├─ server/
    │  └─ ...
    ├─ shared/
    ├─ public/
    ├─ server/
    └─ nuxt.config.ts
    
  • IDE kini mampu membedakan antara kode client dan server, meningkatkan produktivitas. Meski demikian, struktur lama masih didukung—Nuxt akan tetap mendeteksi dan mendukungnya.

⚙️ 2. Data Fetching yang "Lebih Pintar"

  • useAsyncData dan useFetch kini otomatis berbagi data saat menggunakan key yang sama antara beberapa komponen.
  • Cleanup otomatis saat komponen unmount.
  • Support reactive keys untuk refetch dinamis.
  • Kontrol cache lebih fleksibel—mode dedupe kini menerima opsi cancel atau defer.

🧠 3. Perbaikan Dukungan TypeScript

  • Nuxt 4 membagi proyek TypeScript ke dalam beberapa konteks: aplikasi, server, shared, dan builder.
  • Hasilnya: autocompletion lebih akurat, inference lebih baik, dan error yang dihasilkan lebih relevan.
  • Cukup satu tsconfig.json di root—lebih sederhana!.

⚡ 4. CLI & Dev Experience yang Lebih Cepat

  • Waktu cold starts lebih singkat, berkat cache kompilasi V8.
  • File watcher native menggunakan fs.watch, menghemat resource.
  • Komunikasi antara CLI dan Vite dev server kini via socket internal—mengurangi overhead terutama di Windows.

🛠️ 5. Migrasi ke Nuxt 4

  1. Upgrade Nuxt
npx nuxt upgrade --dedupe

Ini memastikan lockfile di-dedup dan dependency Nuxt lainnya ikut diperbarui.

  1. Migrasi dengan Codemod (opsional)
npx codemod@latest nuxt/4/migration-recipe

(Tersedia juga untuk yarn/pnpm/bun).

  1. Uji & Sesuaikan Jalankan testing, kompilasi, dan cek tipe atau potensi konflik di modul. Upgrade guide mencakup banyak detail & opsi backward compatibility.

🎯 6. Apa Agenda Selanjutnya?

  • Nuxt 4 dapatkan patch cepat untuk fix bug.
  • Nuxt 3 akan tetap ter-maintain hingga Januari 2026, memberi cukup waktu buat migrasi.
  • Nuxt 5 (yang akan memasukkan Nitro v3 dan h3 v2) diperkirakan rilis beberapa bulan setelah Nuxt 4.

✅ Kesimpulan

Nuxt 4 adalah upgrade berfokus pada developer experience: struktur proyek lebih rapi, tipe lebih akurat, data fetching lebih pintar, dan dev environment lebih cepat. Dengan tooling migrasi yang lengkap dan fase stabilitas yang matang, kamu bisa mulai adaptasi sekarang—atau migrasi segera setelah siap.