Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Laravel + Vue 3 + Inertia: From Zero to Production SPA

Laravel + Vue 3 + Inertia: Xây Dựng SPA Từ Con Số 0 Đến Triển Khai Thực Tế

Laravel + Vue 3 + Inertia: Xây Dựng SPA Từ Con Số 0 Đến Triển Khai Thực Tế

Từ Khởi Đầu Đến Hoàn Thiện: Xây Dựng Ứng Dụng SPA Chuyên Sâu với Vue, Inertia, Laravel & Tailwind và Triển Khai Dự Án Thực Tế

4.5
(2,452 đánh giá)
13,885 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
19.5 giờ video
248 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Full Stack Development #Laravel #Vue Js #Web Development

Bạn sẽ học được gì

Làm Chủ Bộ Công Nghệ VILT: Laravel, Vue 3, Inertia và Tailwind CSS
Xây dựng một Ứng Dụng Single Page Application (SPA) full-stack từ đầu
Phát triển hệ thống backend mạnh mẽ với Laravel
Tạo giao diện người dùng (UI) động, responsive bằng Vue 3 và Composition API
Tích hợp liền mạch frontend và backend với Inertia
Thiết kế bố cục hiện đại, tối ưu với Tailwind CSS
Triển khai tính năng xác thực người dùng và gửi email
Áp dụng các phương pháp hay nhất trong phát triển web full-stack

Yêu cầu

Kiến thức cơ bản về JavaScript
Kiến thức cơ bản về PHP

Đối tượng phù hợp

Dành cho người mới bắt đầu với PHP
Dành cho người mới bắt đầu với JavaScript

Nội dung khóa học

17 phần • 182 bài giảng
1 Bạn sẽ học và xây dựng gì trong khóa học?
2 Laravel, Vue và Inertia kết hợp với nhau như thế nào?
3 Bạn cần những công cụ gì và nhận hỗ trợ ra sao?
4 Tài nguyên cho Visual Studio Code!
5 Phần tiếp theo là gì?
1 Cài đặt môi trường trên Windows! - Giới thiệu phần
2 Cài đặt PHP trên Windows
3 Kích hoạt Extension pdo_mysql!
4 Cài đặt Composer trên Windows
5 Cài đặt Node.js trên Windows
6 Cài đặt Docker trên Windows
1 Cài đặt môi trường trên Mac! - Giới thiệu phần
2 Cài đặt Homebrew trên MacOS
3 Cài đặt PHP trên MacOS
4 Cài đặt Composer trên MacOS
5 Cài đặt Node.js trên MacOS
6 Cài đặt Docker trên MacOS
1 Tạo Dự án Laravel Mới (Và Xử lý Các Vấn Đề!)
2 Cấu hình Laravel, Vue và Inertia.js!
3 QUAN TRỌNG! Hướng dẫn Nâng cấp Inertia.js
4 Hướng dẫn Nâng cấp Đầy đủ lên Laravel 11 & Mã nguồn Khóa học cho Laravel 11
1 Ứng Dụng SPA Đầu Tiên Của Bạn - Giới thiệu phần
2 Tạo các trang đầu tiên
3 Truyền dữ liệu vào trang
4 Layouts (Bố cục)
5 Dữ liệu phản ứng (Reactive) trong Vue
6 Layouts cố định với Inertia
7 Layouts mặc định
8 (TÙY CHỌN) Sử dụng linter (ESLint), jsconfig và tận dụng tối đa VSCode
9 (TÙY CHỌN) Các chủ đề JavaScript nâng cao (arrow functions, promises, async importing, v.v.)
1 Làm việc với Cơ sở Dữ liệu - Giới thiệu phần
2 Laravel Debugbar & IDE Helper
3 QUAN TRỌNG: Hỏi & Đáp về Các Vấn Đề Kết nối Cơ sở Dữ liệu Thường gặp
4 Kết nối đến Cơ sở Dữ liệu
5 Models và Migrations
6 Làm việc với Migrations
7 Model Factories & Seeders
8 QUAN TRỌNG! Giải quyết Các Vấn Đề với Laravel Tinker!
9 Truy vấn Cơ sở Dữ liệu
10 Truy vấn Cơ sở Dữ liệu (THỬ THÁCH)
11 Cập nhật và Chèn Dữ liệu, Gán Hàng loạt (Mass Assignment)
12 Resource Controller và Route Model Binding
13 Vue Directives (v-for, v-bind) & Custom Components
14 Xử lý Form (useForm, v-model)
15 Xử lý Form trong Laravel
16 Middlewares và Chia sẻ Dữ liệu với Tất cả các Trang
17 Dữ liệu Tính toán (Computed) và Hiển thị Có điều kiện (Hiển thị Flash Messages)
18 Xác thực Dữ liệu (Back End & Front End)
19 Form Chỉnh sửa
20 Xóa Dữ liệu
21 Sử dụng Tên Route Laravel trong Vue
1 Thêm Phong cách với Tailwind CSS - Giới thiệu phần
2 Cài đặt và Thiết lập Tailwind CSS
3 Tại sao chọn Tailwind CSS? Tổng quan về Tailwind
4 Tạo kiểu cơ bản cho Ứng dụng (Thực hành với Tailwind)
5 Custom UI Components và Grid Responsive Design
6 Chi tiết Danh sách (Non-Prop Attributes)
7 Custom Component Định dạng Giá
8 Trang Danh sách (Nâng cao Responsive Design!) + Vue Named Slots
9 Tạo kiểu cho Form
10 Trích xuất Styles Tailwind bằng Directive @apply
11 Tạo kiểu cho Form Chỉnh sửa
12 Tạo kiểu cho Thông báo Lỗi
1 Chúng ta sắp xây dựng gì?
2 Công cụ Tính Toán Thanh toán - Phần Giao diện (Sliders)
3 Công cụ Tính Toán Thanh toán - Phần Logic
4 Composables - Logic Có thể Tái sử dụng trong Vue (Tính toán Thanh toán Hàng tháng Reactive)
5 Hiển thị Thanh toán bên cạnh Mỗi Danh sách (Tái sử dụng Composable)
6 Thêm các Thành viên Composable khác (Tổng Thanh toán, Tổng Lãi suất)
1 Xác thực & Bảo mật - Giới thiệu
2 Authentication Controller và Routes
3 Authentication Form - Phần Giao diện và Logic Cơ bản
4 Logic Đăng nhập - Giải thích Quy trình Xác thực
5 Giải thích Quy trình Xác thực
6 Lấy thông tin Người dùng Hiện đang Đăng nhập
7 Đăng xuất Người dùng
8 CSRF Tokens
9 Bảo vệ Routes (Ủy quyền) - Bạn có thể Truy cập một Trang cụ thể không?
10 Form Đăng ký Người dùng
11 Lưu ý về Password Hash từ Laravel 10
12 Logic Đăng ký Người dùng & Hash Mật khẩu
13 Eloquent Mutators & Accessors - Ví dụ về Hash Mật khẩu
14 Cơ chế Hash Mật khẩu Hoạt động như thế nào
15 Liên kết Form
16 Lỗi 419 khi Đăng xuất
1 Quan hệ Cơ sở Dữ liệu & Ủy quyền Người dùng - Giới thiệu
2 Tạo Quan hệ Cơ sở Dữ liệu Một-nhiều
3 Kết nối Models trong Quan hệ Một-nhiều - Lý thuyết
4 Kết nối Models trong Quan hệ Một-nhiều - Thực hành
5 Mỗi Danh sách Mới cần một Chủ sở hữu!
6 Model Policies - Lý thuyết
7 Model Policies - Thực hành
8 Model Policy và Người dùng Khách
9 Chỉ Chủ sở hữu mới có thể Chỉnh sửa hoặc Xóa!
10 Người dùng Quản trị - Ghi đè Policy Implementation
11 Đọc Dữ liệu Liên quan (Sử dụng Quan hệ Cơ sở Dữ liệu)
1 Phân trang & Lọc Dữ liệu - Giới thiệu
2 Thêm Phân trang
3 Form Lọc - Phần Giao diện
4 Form Lọc - Phần Logic JavaScript
5 Lọc Dữ liệu
6 Truy vấn Có điều kiện trong Eloquent
7 Local Query Scopes trong Eloquent
8 Lọc Sử dụng Local Query Scope
1 Tài khoản Môi giới - Chúng ta sẽ xây dựng gì?
2 Nhóm Routes Controller
3 Hiển thị Danh sách của Môi giới
4 Xóa mềm (Đưa Bản ghi vào Thùng rác - Có thể Khôi phục)
5 Xóa mềm Danh sách
6 Lọc Sử dụng Checkboxes - Phần Giao diện
7 Vue Watchers - Lọc Sử dụng Checkboxes
8 Hàm Debounce - Xử lý Lượng Sự kiện Lớn
9 Lọc Sử dụng Checkboxes - Phần Backend
10 Sắp xếp Tùy chỉnh - Back End
11 Sắp xếp Tùy chỉnh - Front End
12 Form Lọc - Giá trị Mặc định
13 Phân trang trong Phần Tài khoản Của Tôi
14 Nút Chỉnh sửa, Xóa và Xem trước
15 Khôi phục Models
1 Tải lên Tệp - Giới thiệu
2 File Data Model
3 Giải thích Laravel Filesystem Abstraction
4 Chuẩn bị cho Việc Tải lên Tệp
5 Tải lên Nhiều Hình ảnh (Phần Backend)
6 Tải lên Nhiều Hình ảnh (Trong Vue)
7 Tạo kiểu cho Input Tải lên & Cải thiện Trải nghiệm Người dùng (UX)
8 Chỉ báo Tiến trình Tải lên Tệp
9 Hiển thị Các Hình ảnh Đã tải lên
10 Xóa Các Tệp Đã tải lên
11 Hiển thị Hình ảnh Danh sách trên Trang Danh sách
12 Xác thực Tệp Được tải lên (Đảm bảo đó là Hình ảnh!)
13 Đếm Models Liên quan (Chúng ta có bao nhiêu Hình ảnh?)
1 Đặt Giá - Giới thiệu
2 Offers Data Model và Quan hệ
3 Offer Widget - Thêm Widget trong Vue
4 Đặt Giá - Phần Backend
5 Vue Custom Component Events (Truyền Dữ liệu đến Component Cha)
6 Lấy và Hiển thị Offer Hiện có của Người dùng Hiện tại
7 Đã có bao nhiêu Offer được đặt?
8 Trang Danh sách Offer
9 Xem Danh sách Đơn lẻ với Tất cả các Offer
10 Chấp nhận Offer (Single Action Controller & Tải Quan hệ Lồng nhau)
11 Xem Offer nào đã được Bán
12 Lọc bỏ các Offer đã Bán (Truy vấn Sự hiện diện/vắng mặt của Quan hệ)
13 Cách Đơn giản hơn để Xác định Danh sách đã Bán (Tái cấu trúc Query Scope!)
14 Không thể Đặt hoặc Thay đổi Offer cho Danh sách đã Bán!
15 Cải thiện Giao diện Người dùng (UI)
1 Thông báo - Thông tin cho Người dùng về Sự kiện - Giới thiệu
2 Giới thiệu Thông báo & Thiết lập Cơ sở Dữ liệu
3 Gửi Thông báo khi có Offer được Đặt
4 Hiển thị Số lượng Thông báo
5 Hiển thị Trạng thái Trống (Empty State)
6 Trang Danh sách Thông báo - Phần Backend
7 Trang Danh sách Thông báo - Phần Front End
8 Đánh dấu Thông báo là Đã đọc
1 Gửi Email - Giới thiệu
2 Kiểm tra Email Cục bộ với Mailhog (trong Docker)
3 Gửi Thông báo qua Email
4 Người dùng Đã đăng ký - Quy trình Xác thực Email
5 Yêu cầu Xác thực trên các Trang & Trang Thông báo Chưa xác thực
6 Route Xác thực Người dùng
7 Gửi lại Liên kết Xác thực (và Hiểu về Throttling và Cache)
8 Kiểm tra Quy trình Gửi lại Email
1 JavaScript là gì?
2 Sử dụng Chrome Console để học JavaScript
3 Biến - var, let, const
4 Kiểu Dữ liệu Nguyên thủy
5 Các vấn đề Thường gặp với Kiểu Dữ liệu
6 Hàm
7 Kiến thức cơ bản về Mảng
8 Kiến thức cơ bản về Đối tượng
9 Phương thức của Đối tượng
10 Câu lệnh If
11 Vòng lặp (for)
12 Phạm vi Biến - const vs let vs var
13 Thao tác với Mảng
14 Các Khóa của Đối tượng
15 Các Giá trị của Đối tượng
16 Hàm Mũi tên
17 Phương thức Array.filter
18 Phương thức Array.map
19 Phương thức Array.reduce

Giới thiệu khóa học

Build a modern full-stack SPA with Laravel, Vue 3, Inertia.js & Tailwind (VILT stack)

Skip the theory-overload. In this course, we’ll actually build a real, production-ready Single Page Application from scratch — backend to frontend — using Laravel, Vue 3, Inertia.js, and Tailwind CSS. You’ll learn by doing, with practical, hands-on coding at every step.

You’ll learn by doing:

  • Set up a fresh Laravel + Vue + Inertia project and get it running locally (Mac or Windows)

  • Use Vue 3 Composition API for clean, reactive, maintainable components

  • Connect Laravel & Vue with Inertia.js — no separate API layer, no boilerplate REST/GraphQL headaches

  • Style fast with Tailwind CSS — fully responsive layouts without wrestling CSS files

  • Implement auth (login, registration, permissions) the Laravel way

  • Work with databases: migrations, Eloquent ORM, relationships, seeding

  • Add real-world features: routing, middleware, email sending, and form handling

  • Manage state and dynamic UI in Vue for a smooth SPA experience

Also covered:

  • Sensible project structure for full-stack apps that scales with new features

  • Performance tips & optimization techniques for faster load times and smoother UX

  • Debugging workflows that actually help you fix issues faster and with less frustration

  • Best practices for keeping your codebase clean, organized, and easy to maintain over time

By the end, you’ll know exactly how to plan, build, and ship a modern, production-ready SPA without getting lost in outdated patterns, bloated dependencies, or overcomplicated setups.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Full Stack Development
Hiển thị tất cả khoá học Laravel
Hiển thị tất cả khoá học Vue Js
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊