Install Nuxt JS 4 SSR dengan Laravel 12

Dalam membangun aplikasi fullstack modern, kombinasi antara Laravel 12 sebagai backend dan Nuxt JS 4 sebagai frontend SSR (Server Side Rendering) menjadi pilihan yang cukup ideal. Laravel akan menangani API, autentikasi, hingga manajemen database, sementara Nuxt JS menangani sisi antarmuka pengguna yang interaktif dan reaktif.

Seperti yang dijelaskan pada dokumentasi resmi Nuxt JS, proses instalasi Nuxt sangatlah sederhana dan bisa dilakukan melalui terminal atau command prompt.

Cukup jalankan perintah berikut:

npm create nuxt@latest nuxt-laravel

Penjelasannya begini:

• npm create nuxt@latest berarti kita meminta Node Package Manager (NPM) untuk membuat project Nuxt menggunakan versi terbaru yang tersedia.
• nuxt-laravel adalah nama folder atau direktori tempat project Nuxt akan dibuat. teman-teman bisa mengganti nama ini sesuai kebutuhanmu.

Saat artikel ini dibuat, Nuxt sudah berada di versi 4, yang merupakan versi terbaru dan membawa berbagai pembaruan signifikan dibanding versi sebelumnya, baik dari sisi performa maupun pengembangan modularnya.

Jadi, dengan satu baris perintah tersebut, kita sudah bisa memulai project Nuxt yang siap diintegrasikan dengan backend Laravel. Langkah berikutnya tentu adalah melakukan konfigurasi agar Nuxt dan Laravel bisa saling terhubung dengan lancar, terutama dalam konteks komunikasi API dan deployment.

Proses Instalasi Nuxt JS 4

Setelah menjalankan perintah npm create nuxt@latest nuxt-laravel, teman-teman akan melihat tampilan seperti pada gambar berikut:

Di sini, Nuxt memberikan beberapa opsi terkait package manager yang akan digunakan untuk mengelola dependensi project. Umumnya tersedia pilihan seperti npm, yarn, dan pnpm.

Untuk tutorial ini, kita akan pilih npm. Cukup tekan tombol Enter pada pilihan tersebut, dan proses instalasi akan berjalan secara otomatis. Silakan ditunggu sampai semua dependensi terpasang dengan sempurna. Pastikan koneksi internet teman-teman stabil, ya!

Setelah proses instalasi selesai, teman-teman akan melihat tampilan akhir seperti ini:

Tampilan tersebut menandakan bahwa Nuxt berhasil diinstal dan project telah siap digunakan.

Menjalankan Project Nuxt

Langkah selanjutnya adalah masuk ke direktori project yang baru saja dibuat:

cd nuxt-laravel

Lalu, jalankan development server Nuxt dengan perintah berikut:

npm run dev

Jika semuanya berjalan lancar, teman-teman akan melihat tampilan seperti ini:

Pada tahap ini, artinya kita sudah berhasil menjalankan project Nuxt kita dalam mode development. Secara default, Nuxt akan berjalan di http://localhost:3000. teman-teman bisa membuka URL tersebut di browser dan melihat tampilan awal dari aplikasi Nuxt 4.

Apa Selanjutnya?

Sampai sini kita sudah menyelesaikan instalasi awal Nuxt JS 4. Pada materi berikutnya, kita akan melanjutkan dengan menginstal beberapa package tambahan yang dibutuhkan untuk membangun aplikasi secara utuh—diantaranya adalah integrasi dengan Laravel sebagai backend, konfigurasi Tailwind CSS, dan sebagainya.

Tetap semangat, dan pastikan setiap langkah teman-teman ikuti dengan teliti agar tidak ada error di tengah jalan.