Baik, sekarang kita masuk ke tahap instalasi project. Di tahap ini, kita akan mengambil source code dari repository GitHub resmi, kemudian melakukan instalasi dependensi Laravel menggunakan Composer.

Clone Repository Project

Silakan teman-teman clone repository berikut ini. Kita bisa melakukannya langsung melalui terminal (atau CMD bagi pengguna Windows). Pastikan Git sudah terpasang di komputer masing-masing. Jalankan perintah berikut di terminal/CMD:

git clone https://github.com/jkque/laravel-nuxt-ui-starter-kit.git

Perintah ini akan menyalin seluruh struktur dan file project ke dalam folder lokal di komputer teman-teman. Jika proses clone sudah selesai, biasanya terminal akan menampilkan status seperti ini:

Artinya, proses clone sudah berhasil, dan kita siap lanjut ke tahap berikutnya.

Instalasi Dependensi Laravel dengan Composer

Setelah berhasil melakukan clone, masuk ke folder project yang baru saja dibuat:

cd laravel-nuxt-ui-starter-kit

Kemudian jalankan perintah berikut untuk menginstal semua package Laravel yang dibutuhkan:

composer install --ignore-platform-reqs

Nah, di sini ada hal penting yang perlu diperhatikan. Pada sistem operasi Windows, terkadang PHP belum dilengkapi dengan beberapa ekstensi tambahan seperti Horizon atau ekstensi tertentu yang digunakan oleh Laravel. Oleh karena itu, kita tambahkan flag --ignore-platform-reqs agar Composer tetap bisa melakukan instalasi meskipun ada ekstensi yang belum tersedia.

Dengan flag ini, Composer akan mengabaikan pemeriksaan terhadap ekstensi PHP yang tidak ditemukan, sehingga proses instalasi tidak akan gagal hanya karena satu ekstensi belum aktif.

NPM Install

Setelah berhasil melakukan instalasi dependensi Laravel melalui Composer, kita juga perlu menjalankan perintah npm install. Langkah ini bertujuan untuk menginstal semua package frontend yang dibutuhkan oleh proyek kita, seperti Vite, Tailwind CSS, Vue/Nuxt UI, dan berbagai dependency JavaScript lainnya.

Silakan jalankan perintah berikut di terminal:

npm install

Proses ini akan membuat folder node_modules berisi seluruh pustaka frontend yang diperlukan agar Inertia.js dan Nuxt UI dapat berjalan dengan baik di sisi klien (browser).

Catatan: Pastikan tidak ada error saat proses instalasi. Jika muncul pesan kesalahan terkait versi Node.js atau NPM, perbarui Node.js kamu ke versi terbaru (minimal Node 18).

Konfigurasi File .env

Setelah kita berhasil meng-clone project dari GitHub, biasanya file konfigurasi utama Laravel yang bernama .env belum tersedia. Hal ini memang sengaja — karena file .env menyimpan konfigurasi yang bersifat pribadi, seperti koneksi database, API key, dan credential lainnya, sehingga tidak disertakan dalam repository publik.

Untuk membuat file .env, kita cukup menyalin file contoh yang sudah disediakan oleh Laravel, yaitu env.example. Caranya, jalankan perintah berikut di terminal (untuk pengguna Windows):

copy .env.example .env

Sedangkan bagi pengguna macOS atau Linux, gunakan perintah:

cp .env.example .env

Jika berhasil, terminal akan menampilkan pesan seperti:

1 file(s) copied.

Artinya file .env sudah berhasil dibuat, dan siap untuk kita isi dengan konfigurasi yang diperlukan.

Generate Application Key

Langkah berikutnya adalah menghasilkan application key (atau sering disebut juga APP_KEY). Key ini sangat penting karena digunakan Laravel untuk enkripsi data sensitif, seperti session, password reset token, dan berbagai fitur keamanan lainnya. Tanpa key ini, aplikasi tidak akan bisa berjalan dengan baik — biasanya akan muncul pesan error saat membuka halaman pertama.

Untuk membuat key baru, jalankan perintah berikut:

php artisan key:generate

Setelah perintah dijalankan, Laravel akan secara otomatis menulis nilai APP_KEY di dalam file .env. Jika berhasil, terminal akan menampilkan pesan seperti:

 INFO  Application key set successfully.

Konfigurasi Database

Langkah selanjutnya setelah membuat file .env dan generate key adalah mengatur koneksi database. Laravel menggunakan file .env untuk menyimpan semua informasi konfigurasi, termasuk detail koneksi ke database yang akan digunakan oleh aplikasi.

Membuat Database Baru

Silakan teman-teman buka phpMyAdmin (atau aplikasi manajemen database lainnya seperti DBeaver, TablePlus, atau HeidiSQL). Kemudian buat database baru dengan nama misalnya:

nuxt-ui-starter-kit

Nama ini bebas, tetapi pastikan nanti sesuai dengan yang akan teman-teman tulis di file .env.

Menyesuaikan Konfigurasi di File .env

Setelah database dibuat, buka file .env di root project Laravel teman-teman, lalu ubah bagian konfigurasi database menjadi seperti berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nuxt-ui-starter-kit
DB_USERNAME=root
DB_PASSWORD=

Penjelasannya:

Menjalankan Migrasi

Langkah terakhir dalam proses instalasi awal project adalah menjalankan migrasi database. Migrasi dalam Laravel berfungsi untuk membuat struktur tabel di dalam database secara otomatis berdasarkan file blueprint yang sudah disiapkan di folder database/migrations.

Dengan kata lain, migrasi ini akan “membangun kerangka dasar” dari database aplikasi kita — seperti tabel users, password_resets, failed_jobs, dan tabel-tabel lainnya yang dibutuhkan Laravel.

Silakan buka terminal di root project Laravel teman-teman, lalu jalankan perintah berikut:

php artisan migrate

Laravel akan memproses semua file migrasi yang ada, lalu membuat tabel-tabel tersebut di database yang sudah dikonfigurasi sebelumnya (melalui file .env).

Jika proses migrasi berhasil, terminal akan menampilkan pesan seperti ini:

Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (45.32ms)
...
Migration table created successfully.

Artinya, semua struktur database sudah berhasil dibuat dan siap digunakan.

Konfigurasi composer.json

Sebelum menjalankan project, silakan buka file composer.json, karena kita perlu menyesuaikan perintah script dev agar proses development berjalan lebih efisien.

Secara default, pada beberapa starter kit, bagian scripts biasanya terlihat seperti ini:

"dev": [
    "Composer\\Config::disableProcessTimeout",
    "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
],

Namun kita akan sederhanakan dan sesuaikan agar hanya menjalankan proses utama yang dibutuhkan, yaitu server Laravel, worker queue, dan Vite untuk asset bundling. Ubah menjadi seperti berikut ini:

"dev": [
    "Composer\\Config::disableProcessTimeout",
    "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185\" \"php artisan serve\" \"php artisan queue:work --tries=1\" \"npm run dev\" --names=server,queue,vite --kill-others"
],

Penjelasan:

• php artisan serve → Menjalankan server Laravel.

• php artisan queue:work --tries=1 → Menjalankan job queue agar background process (seperti notifikasi atau broadcast) tetap aktif.

• npm run dev → Menjalankan Vite untuk meng-compile asset Tailwind dan Vue/Nuxt UI secara real-time.

• --kill-others → Jika salah satu proses berhenti, proses lainnya juga otomatis dihentikan.

• -c dan --names → Memberikan warna dan label agar lebih mudah dibaca di terminal

  ---

Jalankan Project

Nah, setelah semua tahap instalasi dan migrasi selesai, sekarang saatnya kita menjalankan project Laravel + Nuxt UI untuk pertama kali.

Biasanya, ketika bekerja dengan Laravel dan frontend berbasis Vite atau Inertia.js, kita membutuhkan dua terminal:

1. Satu untuk menjalankan server Laravel (php artisan serve)
2. Satu lagi untuk menjalankan build frontend (npm run dev)

Namun, di versi Laravel terbaru, sudah ada kemudahan baru yang memungkinkan kita menjalankan keduanya sekaligus hanya dengan satu perintah.

Menjalankan Project

Cukup jalankan perintah berikut di terminal:

composer run dev

Perintah ini akan menjalankan Laravel development server dan Vite dev server secara bersamaan. Jadi, teman-teman tidak perlu lagi membuka dua terminal terpisah.

Laravel akan otomatis:

• Menjalankan php artisan serve
• Menjalankan npm run dev di background

Sehingga aplikasi langsung siap diakses.

Akses Aplikasi

Setelah perintah di atas berjalan, teman-teman akan melihat informasi seperti berikut di terminal:

INFO  Server running on [http://127.0.0.1:8000].
VITE  Dev server running on [http://127.0.0.1:5173].

Silakan buka browser dan akses:

http://127.0.0.1:8000

Jika semua langkah sebelumnya sudah benar, teman-teman akan melihat tampilan awal Laravel + Nuxt UI Starter Kit yang sudah siap dikembangkan.

Sampai di tahap ini, kita sudah berhasil melakukan seluruh proses instalasi — mulai dari clone repository, konfigurasi .env dan database, menjalankan migrasi, hingga setup composer dan npm. Artinya, starter kit Laravel 12 + Inertia.js + Nuxt UI + Tailwind CSS kita sudah siap digunakan untuk pengembangan selanjutnya.

Pada materi berikutnya, kita akan mulai membuat CRUD sederhana menggunakan starter kit ini. Kita akan mempelajari bagaimana cara:

• Membuat route dan controller di Laravel,
• Menampilkan data melalui Inertia dan Nuxt UI,
• Menghubungkan form input dari frontend ke backend,
• Serta menampilkan hasilnya dengan tampilan modern berbasis Tailwind CSS.

Tujuannya agar teman-teman bisa memahami alur kerja fullstack Laravel–Nuxt UI secara menyeluruh, dari backend hingga frontend, dengan gaya pengembangan modern tanpa REST API.