Installasi Laravel Bersama Vue JS

Vue.js adalah kerangka kerja progresif untuk membangun antarmuka web interaktif. dan sangat mudah dalam mengambil library pada proyek yang ada juga memiliki fungsi pengaturan komponen View yang ada dengan API sangat sederhana. Vue js mempunyai kemampuan untuk membangun Aplikasi Single-Page yang canggih dan dapat dikombinasikan pada library modern saat ini.

Laravel sudah satu paket dengan vue js sehingga cara installasinya pun sangat mudah sekali yaitu dengan cara berikut ini:

Intallasi terlebih dahulu laravelnya:

composer create-project --prefer-dist laravel/laravel nama-proyek

seperti gambar berikut ini:

setelah selesai coba jalan kan laravel tersebut apakah sudah terinstallasi dengan benar dengan mengetikan perintah berikut:

php artisan serve

seperti gambar berikut ini:

Lalu buka browser dan ketikan alamat url:

http://127.0.0.1:8000

maka akan tampil halaman selamat datang dari laravel seperti gambar berikut:

kemudian untuk menginstallasi vue js dan beberapa paket pendukung ketikan perintah berikut ini:

npm install

seperti pada gambar:

Apabila sudah selesai ketikan perintah berikut untuk menjalankan:

npm run dev

dan untuk mengetahui apakah vue js sudah bisa digunakan tambahkan kode berikut ini yang di sematkan pada file welcome.blade.php

berikut kodenya:

script lengkapnya sebagai berikut:

buka dan refresh kembali browser 127.0.0.1/8080 maka akan tampil sebuah pesan Example Component seperti pada gambar ini

Pesan tersebut berasal dari component Example.vue yang berada pada folder assets jadi apabila ingin merubah pesan tersebut buka lah pada file Example.vue

jangan lupa untuk menjalankan npm run dev setelah mengganti script vue atau bisa juga dengan:

npm run watch

agar setiap penggantian dan menyimpan file selalu langsung dikompilasi.

Selanjutnya Baca:

• Menghubungkan Link Menggunakan Vue Router Untuk SPA Laravel+Vue