Cara Instalasi dan Implementasi Vue.js di Project Laravel

Apa itu Laravel?

Laravel merupakan sebuah framework web untuk bahasa pemrograman PHP yang bersifat gratis dan open source. Laravel ramai digunakan orang karena menyediakan fitur-fitur yang dapat membuat pengembangan web menjadi lebih mudah dan lebih cepat.

Apa itu Vue.js?

Vue.js merupakan sebuah framework front-end gratis dan open source berbasis bahasa pemrograman JavaScript yang digunakan untuk membuat user interface.

Mengapa Vue.js?

Keuntungan menggunakan Vue.js adalah Vue.js merupakan framework yang diutamakan untuk front-end dan dapat membuat single-page application. Vue.js dibangun dengan HTML, CSS, JavaScript standar sehingga memiliki learning curve yang cenderung lebih mudah dibanding framework front-end yang lain. Vue.js menyediakan model programming yang bersifat component-based, memudahkan programmer untuk mengembangkan pembuatan user interface.

Dengan menyatukan framework Laravel yang diutamakan untuk pengembangan back-end dan Vue.js untuk pengembangan front-end, pengembangan sebuah aplikasi web full-stack dapat mudah dilakukan dalam satu projek.

Berikut tutorial instalasi nya.

1. Install dan setup projek Laravel

Hal yang pertama-tama dilakukan adalah setup projek Laravel menggunakan composer.

Masukkan command berikut di cmd.

composer create-project laravel/laravel laravel-vue

‘laravel-vue’ merupakan nama projek yang akan dibuat, Anda dapat mengubah nama projek sesuka hati.

Setelah Laravel selesai terinstall, masukkan command berikut di cmd.

cd laravel-vue

2. Install dependensi JavaScript

Selanjutnya, kita akan install dependensi JavaScript menggunakan npm agar dapat mengakses library JavaScript, salah satunya Vue.js.

Masukkan command berikut di cmd.

npm install

3. Install Vue.js

Hal yang dilakukan setelah menginstall dependensi JavaScript ialah install Vue ke projek Laravel yang telah dibuat.

Masukkan command berikut di cmd.

npm install vue vue-loader @vitejs/plugin-vue

4. Setup Vue.js

Setelah Vue.js berhasil terinstall, selanjutnya kita harus setup Vue.js agar dapat digunakan di projek Laravel.

Buka file vite.config.js dan salin kode berikut.

Disini saya telah menambahkan vue() di dalam config.

Selanjutnya, buka file app.js dan masukkan kode berikut untuk integrasi Vue.js.

Setelah itu, buat sebuah file bernama App.vue di direktori resources/js dan salin kode berikut.

<style type="text/css"></strong>

* {

    margin: 0;

    padding: 0;

}

.container {

    background-color: #637e76;

    color: #edf2f4;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: "Courier New", Courier, monospace;

}

</style>

<style type="text/css">* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: #637e76;
    color: #edf2f4;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Courier New", Courier, monospace;
}</style></strong>

Disini saya telah memberi styling kepada elemen Vue.js nya yang anda dapat ubah sesuka hati.

Selanjutnya, buka file welcome.blade.php dan overwrite kode didalamnya dengan kode berikut.

Terakhir, kita akan coba run projeknya dan lihat hasilnya.

Masukkan command berikut ke cmd untuk run dependensi JavaScript nya.

npm run dev

Buka terminal/cmd baru untuk run projek Laravel nya, dengan masukkan command berikut.

php artisan serve

Secara default, aplikasinya akan muncul localhost port 8000.

http://localhost:8000/ atau http://127.0.0.1:8000/

Horee! Vue.js berhasil diinstall di dalam projek Laravel!