Tutorial Cara Membuat SPA Menggunakan Laravel dan Vue JS #1 : Installasi & Persiapan - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar mengimplementasikan SPA atau Single Page Application menggunakan Frameworl Laravel dan Vue JS.
SPA atau Single Page Application adalah sebuah teknik berpindah halaman di dalam sebuah website tanpa harus melakukan reload page.
Dan pada kesempatan kali ini nanti, kita akan mencoba mengimplementasikan dan membuat SPA tersebut dengan Framework Laravel dan juga Vue JS.
Langkah 1 - Install Composer
Langsung saja kita mulai, pertama-tama sebelum kita memulai project menggunakan Laravel, kita diharuskan untuk menginstall Composer terlebih dahulu.
Untuk cara installasi Composer, teman-teman bisa langsung mengunjungi di situs resminya di https://getcomposer.org/ dan silahkan teman-teman install sesuai sistem operasi di komputernya.
Untuk mengetahui, apakah Composer sudah terinstall, kita bisa menjalankan perintah :
composer
Jika berhasil, kurang lebih seperti ini hasilnya
Langkah 2 - Install Laravel
Setelah kita berhasil menginstall Composer, langkah selanjutnya adalah membuat project baru Laravel menggunakan Composer.
Akan tetapi sebelum kita memulainya, untuk menggunakan Laravel 6 di situs resmi laravel kita diberi tahu ada beberapa persyaratan, diantaranya :
- PHP >= 7.2.0
- BCMath PHP Extension
- Ctype PHP Extension
- JSON PHP Extension
- Mbstring PHP Extension
- OpenSSL PHP Extension
- PDO PHP Extension
- Tokenizer PHP Extension
- XML PHP Extension
Setelah semua persyaratn terpenuhi, kita bisa langsung membuat project dengan Laravel, silahkan jalankan perintah dibawah ini :
composer create-project --prefer-dist laravel/laravel laravel-vue-spa
Dari perintah di atas, kita akan membuat sebuah project Laravel baru dengan nama laravel-vue-spa.
Silahkan tunggu proses installasi projectnya sampai selesai. Setelah proses installasi selesai, sekarang kita bisa menjalankan projectnya.
cd laravel-vue-spa
php artisan serve
Jika berhasil kurang lebih tampilannya seperti berikut ini :
Langkah 3 - Install Vue JS dan Vue Router
Oke, pada tahap kali ini kita akan menginstall Vue JS, Vue Router menggunakan NPM. silahkan teman-teman jalankan perintah dibawah ini :
npm install
npm install vue vue-router
Silahkan tunggu proses installasi Vue JS dan Vue Router sampai selesai.
KESIMPULAN
Kita telah belajar bagaimana cara menginstal Laravel 6 menggunakan Composer dan belajar bagaimana cara menginstall Vue JS dan Vue Router menggunakan NPM.
Jika teman-teman memiliki pertanyaan atau kebingungan saat mencobanya, silahkan bisa berkomentar di bawah ini artikel ini.
Terima Kasih