Setup Project Laravel 12 dengan Breeze, Inertia, dan Vue

Jika kita ingin membangun aplikasi web modern berbasis Laravel 12 dengan tampilan interaktif dari Vue.js, menggunakan Inertia.js sebagai penghubungnya, maka kombinasi Laravel Breeze + Inertia + Vue adalah pilihan yang tepat. Namun, sebelum memulai, ada beberapa software pendukung yang perlu disiapkan, di antaranya:

1. PHP 8.2 atau lebih baru (Laravel 12 membutuhkan minimal PHP 8.2)
2. Composer
3. Node.js & npm
4. MySQL atau database lainnya (opsional untuk setup awal)

Install Project Laravel 12

Untuk menginstal Laravel versi 12, jalankan perintah berikut di Command Prompt atau Terminal:

composer create-project laravel/laravel:^12.0 laravel-inertia-vue

Tunggu hingga proses instalasi selesai. Tampilan akhir akan terlihat seperti berikut:

Setelah proses instalasi selesai, masuk ke direktori project Laravel yang baru saja dibuat:

cd laravel-inertia-vue

Install Laravel Breeze

Setelah berada di dalam direktori project Laravel, langkah selanjutnya adalah menginstal Laravel Breeze. Breeze adalah starter kit resmi dari Laravel yang menyediakan fitur autentikasi dasar, seperti:

1. Login
2. Register
3. Lupa password
4. Verifikasi email

Jalankan perintah berikut untuk menginstalnya:

composer require laravel/breeze --dev

Kemudian, install stack Inertia + Vue dengan perintah berikut:

php artisan breeze:install vue

Perintah ini akan langsung mengatur semua file yang dibutuhkan, seperti: auth (login, register), routing, komponen Vue, dan layout dasar yang dijembatani oleh Inertia.

Setup Database & Migrasi

Secara default, Laravel akan menggunakan SQLite untuk database. Karena kita akan menggunakan MySQL, kita perlu mengubah pengaturan di file .env. Silakan buka file tersebut dan ubah menjadi seperti berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_inertia_vuejs
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru di MySQL dengan nama laravel_inertia_vuejs, sesuai dengan yang ada di file .env.

Jika database sudah dibuat, jalankan perintah migrasi awal:

php artisan migrate

Jika koneksi database berhasil, hasilnya akan terlihat seperti ini:

INFO  Preparing database.

  Creating migration table ............................................................................... 7.39ms DONE

   INFO  Running migrations.

  0001_01_01_000000_create_users_table .................................................................. 37.39ms DONE
  0001_01_01_000001_create_cache_table ................................................................... 5.49ms DONE
  0001_01_01_000002_create_jobs_table ................................................................... 26.81ms DONE

Ini menunjukkan bahwa proses migrasi database berhasil dilakukan.

Jalankan Project

Setelah instalasi dan konfigurasi selesai, jalankan server Laravel dengan perintah:

php artisan serve

Kemudian, jalankan perintah berikut untuk meng-compile aset frontend dan mengaktifkan hot reload:

npm run dev

Apa Itu Hot Reload?

Saat kita menjalankan npm run dev, Vite (tool bawaan Laravel 12 untuk frontend) akan memantau perubahan pada file JavaScript, Vue, dan CSS.

Artinya, setiap kali kita menyimpan perubahan di file Vue atau Tailwind CSS, browser akan otomatis me-refresh atau menyuntikkan perubahan tanpa perlu reload manual. Fitur ini sangat membantu dalam proses pengembangan karena lebih cepat dan efisien.

Oke, pada episode berikutnya, kita akan mempelajari struktur folder resources/js di Laravel + Inertia + Vue. Sampai jumpa!