Ketika bekerja dengan PHP dan membutuhkan atau ingin menggunakan library JavaScript untuk interface aplikasi; laravel sangat mendukung hal tersebut, karena laravel dapat diintegrasikan dengan mudah.
Bahkan laravel menyediakan scaffolding aplikasi dengan pilihan library atau framework yang ingin kita gunakan, baik css ataupun js.
Contohnya laravel/ui, yang merupakan package composer untuk laravel yang menyediakan scaffolding untuk frontend dan autentikasi user dengan JavaScript atau pra-prosesor CSS yang ingin kita gunakan seperti Vue, React, dan Bootstrap.
Laravel/ui sendiri merupakan pembaharuan untuk scaffolding frontend yang sebelumnya disediakan atau terintegrasi otomatis pada project laravel, yang menjadi package composer terpisah semenjak laravel 6 rilis.
Cara penggunaanya juga tidak sulit, kita hanya perlu menginstall package laravel/ui dan install scaffolding yang ingin kita gunakan.
Install Vue dengan laravel/ui di Laravel 8
Sebagai contoh untuk lebih jelasnya, mari kita akan coba install package laravel/ui dan membuat scaffolding autentikasi dengan vue.
Pertama mari kita download fresh project laravel 8 terlebih dahulu.
laravel new lavue #atau composer create-project --prefer-dist laravel/laravel lavue
Kemudian kita install laravel/ui menggunakan composer.
composer require laravel/ui
Setelah package laravel/ui terinstall, kita gunakan perintah artisan ui untuk menginstall scaffolding yang ingin kita gunakan.
php artisan ui vue
Lalu jalankan perintah npm install dan npm run dev untuk meng-compile js dan css.
npm install
npm run dev
Setelah selesai, mari kita lihat pada browser.
php artisan serve
Sampai disini vue.js sudah terinstall dan kita sudah bisa menggunakannya, dan dengan css bootstrap untuk desain frontend.
Selanjutnya untuk membuat scaffolding autentikasinya seperti login dan registrasi, kita jalankan perintah php artisan ui vue --auth.
php artisan ui vue --auth
Kemudian kembali kita jalankan npm install dan npm run dev.
Instalasi Vue.js via NPM
Selain cara diatas dengan scaffolding yang sudah disediakan, kita juga bisa menginstall vue.js secara manual atau membuat scafollding kita sendiri dan menginstall library atau framework yang ingin kita gunakan, baik itu css maupun js.
Mari kita gunakan fresh project laravel.
laravel new lavue
Pertama mari kita install node_modules.
npm install
Selanjutnya kita install library vue. Selain package vue yang kita install, kita juga perlu menginstall loader dan compiler vue untuk dapat mengguakan template ataupun component vue.
npm install vue vue-loader vue-template-compiler --save-dev
Setelah semua terinstall, selanjutnya kita buat vue instance di app.js seperti dibawah ini.
//resources/js/app.js
import Vue from 'vue';
import App from './components/App.vue'
new Vue({
el: '#app',
components: { App }
});
Kemudian buat folder baru dengan nama components di direktori js dan tambahkan sebuah component didalamnya dengan nama App.vue, lalu copas template dibawah ini.
//js/components/App.js
<template>
<div>
<h1>Hello, world.</h1>
</div>
</template>
Selanjutnya kita hubungkan elemen DOM dengan instance vue. Silahkan buka welcome.blade.php dan ubah dengan html dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{csrf_token()}}">
<title>Lavue</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Terakhir kita tinggal lakukan compiling. Silahkan buka file webpack.mix.js lalu buat seperti dibawah ini.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue();
Kemudian jalankan perintah npm run dev.
npm run dev
Setelah selesai, jalankan php artisan serve dan kita lihat hasilnya di browser.
Sampai disini vue.js sudah siap digunakan; dan tanpa library atau css framework seperti bootstrap. Silahkan lihat cara install bootstrap di laravel 8 jika ingin menggunakan.