Tích hợp Vue 3 với Laravel
Trong bài viết này mình sẽ sử dụng PHP 7.4 cùng với Node 14.17 để thực hiện quá trình tích hợp Vue 3 trên Laravel.
1. Cài đặt Vue
Ngoài vue ra, chúng ta sẽ cần phải có một package cần thiết nữa, để webpack có thể load được file .vue đó là vue-loader.
Chúng ta cài đặt bằng câu lệnh sau đây:
npm install --save vue@next && npm install --save-dev vue-loader@next
Sau khi cài xong, kiểm tra file lại file package.json. Chúng ta thấy vue cùng vue-loader đã được thêm vào thành công.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^16.8.2"
},
"dependencies": {
"vue": "^3.2.20"
}
}
2. Config webpack
Để Laravel Mix có thể compile và minify được file từ Vue, trong file webpack.mix.js ta cần thêm method vue() vào như sau.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
3. Khởi tạo Vue app
Chúng ta tạo một Vue component. Mình sẽ tạo một file ví dụ với đường dẫn resources/js/App.vue ở dưới đây.
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>
<style>
h1 {
color: greenyellow;
background-color: black;
}
</style>
Trong file resources/js/app.js ta sẽ khai báo import module, khởi tạo Vue App và mount nó vào một element có id là app.
require('./bootstrap');
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
4. Chuẩn bị Blade template
Đầu tiên chúng ta tạo một file Blade mong muốn để chạy. Trong đó, ta thêm một thẻ <div> với id là app ở trong <body>, giống như những gì ta đã khai báo createApp(App).mount('#app') trong resources/js/app.js.
<div id="app"></div>
Tiếp đó ta nhúng thêm file JavaScript được compile lại từ Laravel Mix vào cuối <body>
<script src="{{ mix('js/app.js') }}"></script>
Để lấy ví dụ, ở đây mình sẽ tận dụng lại file resources/views/welcome.blade.php có sẵn và sửa lại toàn bộ như dưới đây.
<!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>Vue 3</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
5. Compile assets và xem thành quả
Chúng ta chạy câu lệnh npm run dev để compile asset. Sau đó chạy php artisan serve và vào http://localhost:8000 để xem lại thành quả của mình.
