Tập tành 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.

>> Sử dụng song song Vue Router trong 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>