Laravel 7 + Vue 2.6 — Instalasi dan Membuat Projek Laravel dan Vue

Alat Yang Di Persiapkan

Pastikan komputer sudah diinstall aplikasi berikut :

• Php 7.2 Keatas
• Node.js (Rekomendasi Versi 12 keatas)
• npm atau yarn
  (npm secara default sudah terpasang ketika anda memasang nodejs)
• Composer

Lalu pastikan kalian sudah akrab dengan :

• Bekerja Dengan Command Line Interface (cli) di Terminal / Cmd
• Npm atau Yarn

Dan Yang Pasti Pengetahuan :

• PHP dan Framework Laravel Fundamental
• Javascript dan Vue.js

nb : Instalasi Php, Nodejs tidak dicamtukan disini, asumsikan saya komputer teman teman sudah terpasang php dan nodejs

Memastikan Workspace Bekerja

Oke pertama kita cek php dan nodejs yang sudah terpasang di komputer kita.

Tulis Kode Berikut di Terminal / CMD

php -v

Jika kalian mengalami error setelah menulis perintah diatas seperti “Command Not Found” artinya komputer kalian belum terpasang php atau php kalian belum masuk ke Environment Variabel Bash Komputer. Kalian bisa menambahkannya dulu atau jika kalian di Windows dengan Menggunakan Xampp bisa menggunakan perintah berikut :

Ganti setiap perintah “php” yang saya tulis di seri belajar ini dengan :

php -v
// atau 
c:\xampp\php\php -v

Dengan asumsi Xampp kalian berada pada c:\xampp\
Jangan Lupa Cek Composer juga :

composer -V

Selanjutnya, Cek Nodejs dan Npm :

// cek node js
node -v
// cek npm
npm -v

// atau jika kalian tidak menggunakan npm tapi menggunakan yarn 
yarn -v

Jika tidak ada error, akan tampil nomor Versi dari masing masing aplikasi.

Membuat Projek Laravel

Pertama tama kita akan membuat projek laravel 7 baru, dengan menggunakan cara yang paling umum dan banyak digunakan yaitu dengan composer :

composer create-project --prefer-dist laravel/laravel laravue

saya akan membuat projek laravel baru dengan nama “laravue” seperti diatas. Lalu tunggu instalasi selesai.

Setelah Selesai, mari masuk ke folder projek tadi.

cd laravue

Lalu kita coba jalankan Laravel nya

php artisan serve

Lalu pergi ke http://127.0.0.1:8000 atau http://localhost:8000 dan harusnya browser menampilkan halaman seperti ini :

Memasang Package Laravel UI

Kita memerlukan salah satu package bernama laravel/ui untuk membuat scaffolding Vue kita, sebenarnya kita bisa manual langsung menambahkan modul modul untuk Vue kita, tapi kita kan sudah disediakan Package laravel/ui ini, akan sayang kalau tidak kita manfaatkan.
Oke Pertama, kita pasang package nya dengan Composer :

composer require laravel/ui

Mengintegrasikan Vue ke Laravel

Lalu untuk meng-generate Vue Scaffolding, gunakan perintah :

php artisan ui vue

Lanjut jalankan perintah berikut untuk mengunduh semua module yang diperlukan :

npm install

Setelah itu, lanjut kita akan mengedit sejenak file utama Vue kita, karena file utama yang digenerate laravel menurut saya sangat tidak beauty kode, jadi mari edit file berikut laravue/resources/js/app.js

Hapus semua kode sebelumnya yang seperti ini :

lalu tulis ulang, Ganti menjadi :

Lalu kita akan buat View Blade untuk menjalankan Script Vue ini, buat file baru dengan nama vue.blade.php di laravue/resources/views/layouts

Jangan lupa edit Route Laravel nya, kita akan buat semua request masuk kedalam View Blade vue.blade.php ini. Edit File laravue/routes/web.php :

Fungsi diatas adalah kita membuat semua request aplikasi laravel kita agar kita arahkan ke file view bernama layouts/vue.blade.php kita tadi.

Compiling dan Preview

Terakhir adalah kita lakukan compiling javascript kita, kalian bisa menggunakan perintah npm run watch untuk otomatis mengcompile ketika kalian mennyimpan file. Jadi perintah tersebut akan otomatis melakukan compile ketika dia mendeteksi adanya perubahan file projek kalian.
Atau ketika kalian ada di mode produksi, maka jalankan kode npm run production untuk mengcompile dalam mode produksi.

npm run watch

Tapi, karena kita masih mode development, maka saya sarankan jalankan kode diatas selama mengerjakan projek vuejs ini, agar setiap kalian menyimpan suatu file / melakukan perubahan, maka npm akan otomatis meng-compile ulang script kalian.

Jika compiling sudah sukses seperti diatas, buka kembali laravel kalian dengan perintah php artisan serve lalu buka http://127.0.0.1:8000

Jika muncul tampilan seperti diatas, selamat kalian sudah berhasil mengintegrasikan Vuejs dan Laravel. Sekarang kalian tinggal edit saja di resources/js/app.js untuk membuat perubahan, oh iya berkat Laravel Ui tadik kita tak hanya di buatkan Vuejs Scaffolding, tapi kita juga diberi module bootstrap juga, oleh karena itu kita bisa langsung menggunakan Style Bootstrap di vue kita.

Ini berkat Laravel Ui yang membuat file bernama bootstrap.js :

Oleh karena itulah mengapa tadi di file app.js kita menambahkan perintah import './bootstrap' yang bertujuan agar kita juga bisa menggunakan Bootstrap, Jquery, Axios, Popper yang sudah dibuatkan oleh Laravel Ui.

Artikel Berikutnya :

Laravel 7 + Vue 2.6 — Menggunakan Vue Router untuk Web SPA (Singgle Page Application)

Selesai ~

Okay, begitulah seri 1 kali ini, kita sudah mencoba Membuat Projek Laravel dan mengintegrasikannya dengan Vuejs dengan Bantuan Package laravel/ui.
Diartikel berikutnya, kita bisa mencoba menambahkan vue-router untuk membuat Aplikasi Singgle Page Application yang sempurna lagi. Tunggu Artikel berikutnya!

Semoga Bermanfaat