Laravel Mix dengan VueJS

Laravel Mix adalah compiler bawaan dari Laravel untuk mengkompilasi asset yang bertipe JS, CSS, LESS, SASS dengan bantuan Webpack.

Webpack secara sederhana adalah modul bundler javascript yang dapat memperkecil ukuran assets, membentuk beragam asset menjadi satu kesatuan, dan mempermudah manajemen dependencies.

Walaupun Laravel Mix merupakan fitur bawaan laravel namun kita bisa menggunakan secara terpisah dari Laravel. Pada pembahasan ini kita akan coba membuat aplikasi serderhana menggunakan VueJS dengan Laravel Mix.

Baca Juga : Laravel Mix menggunakan Tailwindcss

Instalasi Kebutuhan

Sebelumnya pastikan bahwa kamu sudah install NodeJS terlebih dahulu. Untuk versi yang saya pakai adalah NodeJS versi 12.11.0. Jika belum tinggal download di halaman website resminya disini : nodejs.org.

Persiapan Laravel Mix

Pertama buat folder project baru dengan nama vue-mix. Buka folder tersebut di terminal (cmd). Ketikan perintah :

$ npm init -y
$ npm install laravel-mix --save-dev
$ npm install cross-env --save-dev

Jika berhasil ada output di terminal dan dependensi akan ada di folder project kita. Selanjutnya kita perlu mencopy file konfigurasi webpack.mix.js yang ada di module laravel-mix/setup dan memindahkan ke folder root project kita. Perintah :

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

terakhir kita perlu ubah file package.json di bagian :

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
},

menjadi seperti ini.

Instalasi VueJS

Ketikan perintah untuk install VueJs.

$ npm install vue --save-dev

Kemudian kita buat folder dengan nama src dan buat dua file didalamnya dengan nama app.js dan app.scss. Di dalam app.js :


Di folder src/components buat file Todolist.vue dengan script ini :


Selanjutnya jalankan perintah untuk compile file vuejs kita.

$ npm run watch

Jika berhasil akan ada pesan "finished, please run Mix again", dan kalau error silahkan jalankan perintah :

$ npm install

Terakhir kita jalankan kembali perintah compile, maka di terminal akan seperti ini

Akan ada folder dist berisi file script vuejs yang sudah di kompilasi, asset ini yang akan kita gunakan di aplikasi kita.

Bagian Akhir

Buat file index.html di folder project root kita, dengan script ini :


Buka file tersebut di browser, maka aplikasi sederhana kita akan jalan.

Sekian dari Laravel Mix dengan VueJS, untuk source code ada link https://github.com/SutandiOne/vue-mix