Đã đăng vào khoảng 11 giờ trước 7 phút đọc

Vite, Vue 3 và Laravel 11: Stack Local Dev "Không Cần Config" Đỉnh Nhất Hiện Nay

Nếu bạn đã "ăn dầm nằm dề" trong hệ sinh thái PHP được vài năm, chắc hẳn bạn vẫn còn nhớ những tháng ngày ám ảnh với Laravel Mix và Webpack. Việc compile (biên dịch) asset hồi đó mang lại cảm giác lê thê như chờ nồi bánh chưng chín. Bạn sửa một dòng CSS bé tí, ấn Save, rồi ngồi nhìn cái terminal suốt 5 giây ròng rã chỉ để đợi nó build xong.

Hôm nay, thời thế đã hoàn toàn thay đổi. Laravel 11 kết hợp cùng Vue 3 và Vite đã tạo ra một trải nghiệm lập trình nhanh đến mức có cảm giác như dùng ma thuật. Hot Module Replacement (HMR - Thay thế module nóng) giờ đây diễn ra chỉ trong tính bằng mili-giây.

Tuy nhiên, việc ghép nối một build tool frontend tốc độ bàn thờ với một backend đồ sộ thường đẻ ra một rào cản mới cực kỳ đau đầu: quản lý môi trường local.

Trong bài viết này, chúng ta sẽ cùng mổ xẻ lý do tại sao bộ ba này lại là stack hiện đại đỉnh nhất, và làm thế nào để chạy nó mượt mà không tì vết mà không phải bứt tóc vì mấy lỗi CORS hay xung đột Port.

Hình 1: Đồ họa chia đôi màn hình: Cấu trúc thư mục tối giản của Laravel 11 ở bên trái và một component Vue 3 Composition API được Vite render ngay tức thì ở bên phải.

Phép màu của Vite + Laravel 11

Laravel 11 đã "giảm cân" đáng kể cho bộ khung (skeleton) của mình, loại bỏ hàng tá những boilerplate rườm rà và hướng tới một triết lý tối giản, "zero-config" (không cần cấu hình).

Khi bạn ghép backend này với Vite, thực chất bạn không hề "bundle" (đóng gói) các asset của mình trong quá trình dev. Vite serve (phục vụ) trực tiếp mã nguồn Vue 3 của bạn thông qua các ES modules (ESM) native. Trình duyệt sẽ gánh phần việc nặng nhọc nhất, đó là lý do tại sao app của bạn cập nhật ngay lập tức vào khoảnh khắc bạn ấn Save.

Đây là giao diện của một file vite.config.js siêu sạch và hiện đại trong Laravel 11:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true, // Ma thuật nằm ở đây
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Bạn thấy dòng refresh: true chứ? Chỉ một dòng duy nhất đó có nghĩa là: bất cứ khi nào bạn sửa một file Blade .php hoặc một file route ở backend, Vite sẽ tự động f5 (reload) lại toàn bộ trang cho bạn. Không cần phải tự cấu hình thêm bất kỳ dòng nào.

Ác mộng Localhost: Xung đột Port và lỗi CORS

Dù cấu hình code thì đơn giản, nhưng lúc lôi về chạy ở local thì rất nhiều anh em dev lại đâm đầu vào ngõ cụt.

Thông thường, để dev với stack này, bạn phải mở 2 cái terminal:

php artisan serve (chạy backend PHP ở localhost:8000)
npm run dev (chạy dev server của Vite ở localhost:5173)

Ngay lập tức, rắc rối ập đến. Nếu frontend Vue của bạn cố gắng fetch data từ API của Laravel, trình duyệt sẽ block (chặn) nó lại ngay lập tức vì các chính sách CORS (Cross-Origin Resource Sharing) khắt khe.

Để sửa lỗi này, anh em thường tìm đến Docker và Laravel Sail. Nhưng như tất cả chúng ta đều biết, việc spin up nguyên một cái container Docker cục súc chỉ để chạy một cái database MySQL và một cái server PHP ở local sẽ biến chiếc laptop của bạn thành một cái lò sưởi đốt pin siêu tốc. Độ trễ khi đồng bộ file (file-sync) qua các phân vùng của hệ điều hành sẽ bóp nghẹt tốc độ HMR "tức thì" của Vite, làm mất đi hoàn toàn mục đích ban đầu khi chúng ta chọn dùng Vite!

Hình 2: Nỗi thất vọng khi phải đối mặt với tình trạng ngốn CPU của Docker so với sự mượt mà, nhẹ nhàng của các Native Service.

Giải pháp Native, Không-cần-config

Để thực sự đạt được cảnh giới "zero-config", backend và frontend của bạn cần phải chia sẻ chung một không gian tên miền (domain) ở local một cách native (bản địa), loại bỏ hoàn toàn sự cồng kềnh của container.

Đây chính xác là lý do tại sao các developer hiện đại đang lũ lượt di cư sang các trình quản lý môi trường hợp nhất. Nếu bạn muốn giữ cho hệ điều hành của mình luôn sạch sẽ và đạt hiệu năng tối đa, bạn có thể dùng ServBay như một môi trường phát triển web cục bộ.

ServBay chạy thẳng các runtime PHP 8.3/8.4, MariaDB/PostgreSQL, và Redis một cách native trên máy của bạn. Không máy ảo, không độ trễ của container.

Nó khắc phục workflow của Vite như thế nào?

Chung một Domain: Bạn gán một domain local (ví dụ: my-app.local) cho project Laravel của mình thông qua giao diện UI của ServBay.
PHP Tức thì: Nó cho phép bạn cài đặt môi trường PHP bằng một cú click chuột, bỏ qua hoàn toàn các lỗi xung đột của Homebrew.
HMR Mượt mà tuyệt đối: Vì server PHP đang chạy native, kết nối websocket của Vite dùng cho Hot Module Replacement có độ trễ bằng 0. Các component Vue 3 của bạn sẽ update ngay tức thì.
Tạm biệt lỗi CORS: Vì Laravel đóng vai trò serve cái view Blade khởi tạo app Vue trên cùng một domain native, các lỗi CORS bốc hơi hoàn toàn.

Vue 3 Composition API: Mảnh ghép hoàn hảo

Khi các vấn đề về hạ tầng đã được dọn sạch, bạn có thể tận hưởng trọn vẹn sức mạnh của Vue 3 Composition API (<script setup>). Nó sinh ra là để cặp kè với API resources của Laravel.

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);

onMounted(async () => {
    // Không có lỗi CORS nào ở đây cả vì cả frontend và backend 
    // đều đang chạy native trên cùng một domain local dev!
    const response = await axios.get('/api/users');
    users.value = response.data.data;
});
</script>

<template>
    <div class="p-6">
        <h1 class="text-2xl font-bold mb-4">Danh sách Người dùng</h1>
        <ul>
            <li v-for="user in users" :key="user.id" class="mb-2">
                {{ user.name }} - <span class="text-gray-500">{{ user.email }}</span>
            </li>
        </ul>
    </div>
</template>

Lời kết

Sự kết hợp giữa Laravel 11, Vue 3 và Vite được đánh giá là hệ sinh thái full-stack năng suất nhất hiện nay. Tốc độ mà bạn có thể đắp giao diện và nối nó vào một backend xịn sò thực sự là vô đối.

Thế nhưng, tech stack của bạn chỉ có thể nhanh bằng chính cái môi trường đang chạy nó. Bằng cách vứt bỏ các setup container nặng nề và chuyển sang dùng một trình quản lý dev native, cách ly hoàn toàn, bạn sẽ đòi lại được tài nguyên cho chiếc laptop của mình và khai mở được tốc độ kinh hoàng thực sự của Vite HMR.

Đừng đánh lộn với cái localhost của bạn nữa. Hãy giữ nó native, giữ nó đơn giản, và quay lại với niềm vui viết code.