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.

	-------> kode atas tetap
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "npm run development",
	"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
	"watch": "npm run development -- --watch",
	"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
	"prod": "npm run production",
	"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
	},
	kode bawah tetap <-------

view raw package.json hosted with ❤ by GitHub

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 :

	import Vue from 'vue';
	// MENGIMPOR COMPONENT VUE
	import Todolist from './components/Todolist.vue';
	new Vue({
	el: '#app',
	// REGISTRASI COMPONENT VUE YANG SUDAH DI IMPOR
	components:{
	Todolist,
	},
	data: {
	title : 'APP Todo',
	},
	});

view raw app.js hosted with ❤ by GitHub

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

	<template>
	<div class="container mx-auto px-4 ">
	<div class="flex justify-center bg-gray-200">
	<input v-model="item" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white ">
	<button @click="items.push({id:++key,text:item})" class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded ">
	Tambah
	</button>
	</div>
	<div v-for="todo in items" :key="todo.id" class="select-all block m-4 px-5 py-5 bg-blue-800 text-white">{{todo.text}}</div>
	</div>
	</template>
	<script>
	export default {
	name: 'Todolist',
	data: function(){
	return{
	key:1,
	item: '',
	items: [{id:1,text: 'Add new todo!'}],
	}
	}
	}
	</script>

view raw Todolist.vue hosted with ❤ by GitHub

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 :

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>App Vue Mix</title>
	<!-- TAILWINDCSS CDN -->
	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
	</head>
	<body>
	<div id="app">
	<center><h1 class="text-6xl py-4">{{title}}</h1></center>
	<!-- KOMPONEN VUE -->
	<Todolist></Todolist>
	</div>
	<!-- FILE ASSET YANG SUDAH DI COMPILE -->
	<script src="./dist/app.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

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