Vant: thư viện UI Vue cho web di động

Vant là gì

Vant là thư viện component Vue từ công ty thương mại điện tử Youzan của Trung Quốc, được tạo ra để triển khai giao diện web di động thay vì dashboard desktop. Vant đóng gói hơn 80 component — button, picker, action sheet, swipe cell, tabbar, stepper — mỗi component viết bằng TypeScript và giữ kích thước đủ nhỏ để trung bình mỗi component chỉ khoảng 1KB sau khi minify và gzip.

Các tính năng nổi bật của Vant

• ✓Cung cấp hơn 80 component mà không có dependency bên thứ ba nào ở runtime, nên bundle mặc định đã gọn.
• ✓Mỗi component trung bình chỉ khoảng 1KB sau khi minify và gzip, theo số liệu chính README công bố.
• ✓Hỗ trợ song song cả Vue 2 và Vue 3, cộng thêm Nuxt 2 và Nuxt 3 qua một module Vant riêng.
• ✓Có sẵn tree shaking, nên chỉ import vài component sẽ không kéo theo toàn bộ thư viện.
• ✓Có sẵn dark mode và hệ thống theming tùy chỉnh để override token thiết kế trên toàn bộ thư viện.
• ✓Hỗ trợ SSR (server-side rendering) ngay từ đầu, hữu ích cho các storefront dùng Nuxt.
• ✓Có sẵn i18n với hơn 30 ngôn ngữ đi kèm.
• ✓README báo cáo độ phủ unit test hơn 90%, và toàn bộ thư viện viết bằng TypeScript.

Cài đặt Vant trong dự án Vue

Với dự án Vue 3, chạy `npm i vant` để lấy bản phát hành hiện tại; nếu vẫn đang dùng Vue 2, cài tag `vant@latest-v2` — bản được đóng băng riêng để tránh dính breaking change. Yarn, pnpm và Bun đều dùng được tương tự — chỉ cần đổi `npm i` thành `yarn add`, `pnpm add`, hoặc `bun add`. README cũng gợi ý Rsbuild, một build tool do cùng tác giả Vant phát triển, là cách khởi tạo project được khuyến nghị qua `npm create rsbuild@latest`, dù bước này không bắt buộc nếu bạn đã có sẵn build Vue.

Sử dụng component Vant đầu tiên

Vant theo đúng pattern import theo từng component mà hầu hết thư viện Vue dùng: import phần cần dùng từ `vant`, import CSS riêng, rồi đăng ký vào app instance. Style không tự động đi kèm. Ví dụ quickstart trong README import `Button`, import `vant/lib/index.css` để lấy style, rồi đăng ký bằng `app.use(Button)` trước khi mount — nghĩa là style là opt-in theo từng component chứ không phải một file CSS toàn cục.

Khi nào nên chọn Vant

• •Web app ưu tiên di động và trang H5 phục vụ trong trình duyệt nhúng của WeChat — use case gốc của Vant tại Youzan.
• •Luồng thương mại điện tử hoặc checkout cần picker, stepper, và swipe-to-delete giỏ hàng thân thiện với thao tác chạm.
• •Storefront server-rendered dựng bằng Nuxt, vì Vant có sẵn SSR và một module Nuxt riêng.
• •Team đang chạy Vue 2 cần một bộ component ổn định, vẫn được maintain, thay vì phải migrate toàn bộ sang Vue 3 trước.

Các lựa chọn thay thế cho Vant

Câu hỏi thường gặp

Vấn đề mà Vant giải quyết

Tự xây một trang web di động bằng Vue từ đầu nghĩa là phải tự viết action sheet, danh sách swipe-to-delete, và picker thân thiện với thao tác chạm, rồi tự tinh chỉnh từng cái cho màn hình nhỏ. Vant đóng gói sẵn khoảng 80 component như vậy để một team Vue không phải làm lại bộ UI di động mà Youzan đã tự xây cho từng trang H5 hay luồng checkout mới.

Ai nên dùng — và ai nên bỏ qua

Developer Vue đang xây web app di động, trang campaign H5, hoặc storefront chạy Nuxt sẽ có ngay bộ component đã được thiết kế cho thao tác chạm — picker, action sheet, swipe cell — mà không cần tự lắp ráp từ các primitive UI tổng quát. Team làm dashboard hoặc admin panel ưu tiên desktop nên tìm giải pháp khác: component của Vant mặc định nhắm vào viewport di động, và việc chỉnh lại cho chuột-bàn phím nghĩa là phải gắn thêm gói touch-emulator riêng thay vì dùng một thư viện thực sự được thiết kế cho việc đó.

Repo liên quan