Hướng dẫn cài đặt Vue 3 trên Laravel 9 với Vite

Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt Vue 3 trên Laravel 9 sử dụng Vite

Bước 1: Cài đặt Laravel 9

Đầu tiên, bạn cần cài đặt Laravel 9 bằng Composer. Mở terminal và chạy lệnh sau:


composer create-project --prefer-dist laravel/laravel mylaravelapp


Bước 2: Cài đặt Vite

Sau khi đã cài đặt Laravel 9, hãy tạo một project Vue mới sử dụng Vite bằng cách chạy lệnh sau:


npm create @vitejs/app my-vue-app --template vue


Bước 3: Cấu hình Laravel để sử dụng Vite

Mở file webpack.mix.js trong thư mục gốc của project Laravel và thêm đoạn code sau:


mix.js('resources/js/app.js', 'public/js').vue().vite();


Bước 4: Tạo component Vue và tích hợp vào Laravel

Tạo một component Vue mới theo cú pháp sau:


// my-vue-app/src/components/HelloWorld.vue
< template >
< h1 >Hello World< /h1 >
< /template >

< script >
export default {
name: 'HelloWorld'
}
< /script >


Tiếp theo, tích hợp component Vue vào Laravel bằng cách sử dụng directive v-laravel trong file blade:


// resources/views/welcome.blade.php
< div id="app" v-laravel >
< hello-world />
< /div >


Bước 5: Chạy project và kiểm tra kết quả

Chạy project Laravel và xem kết quả tại địa chỉ localhost của bạn. Nếu mọi thứ đều được cấu hình đúng, bạn sẽ thấy component Vue hiển thị trên trình duyệt của bạn.

Với các bước trên, bạn đã cài đặt Vue 3 trên Laravel 9 với Vite thành công.