Tutorial Vue 3 dan Laravel 11 #1: Cara Install Vue 3 (Vite Js) dan Laravel 11

sobatcoding.com - Tutorial cara install Vue 3 Menggunakan Vite Js dan Install Laravel 11

Artikel kali ini akan membahas tentang cara install Vue 3 menggunakan npm via Vite Js dan Rest API menggunakan Laravel 11

Adapun requirement yang digunakan adalah

• Node Js
• PHP versi 8.2 atau terbaru
• untuk Apache dan Mysql kalian bisa memakai XAMPP atau Laragon 

Pastikan requirment di atas telah terinstall di PC/ laptop kalian

Step 1: Install Vue 3 Menggunakan Vite Js

Masuk ke command prompt, masukkan kode seperti berikut

npm create vite@latest vue3-vite-laravel

kemudian pilih Typescript, tunggu sampai proses selesai

Masuk ke folder vue3-vite-laravel, jalankan perintah npm install  untuk menginstall dependencies yang dibutuhkan

Step 2: Install Laravel 11 Menggunakan Composer

Selanjutnya kita install juga Laravel 11 yang akan kita gunakan sebagai REST API nya menggunakan composer. Pada kasus ini Laravel akan diinstall di dalam folder vue3-vite-laravel

Jalankan perintah berikut pada command prompt kalian

composer create-project laravel/laravel rest_api

Step 3: Running atau Menjalankan Vue 3

Untuk running atau menjalankan vue 3 jalankan perintah berikut di command promt

npm run dev

Secara default vue 3 dijalankan di http://localhost::5173

Tampilan di browser

Ubah Port Vue

Kalian bisa mengubah port saat running Vue 3 dengan cara buka file package.json. Pada bagian "dev" : "vite" kalian tambahkan port yang kalian gunakan seperti berikut

"scripts": {
    "dev": "vite --port 5440",
     ...

Kemudian kalian jalankan kembali perintah npm run dev

Step 4: Running atau Menjalankan Laravel 11

Jalankan perintah php artisan serve untuk menjalankan Laravel

Untuk mengganti port kalian bisa menggunakan perintah php artisan serve --port=<port> , contoh php artisan serve --port=3000

Sekian tutorial kali ini. Semoga bermanfaat.

Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.