Vant: A Vue Component Library for Mobile Web Apps
/vant
Vant is Youzan's Vue component library built specifically for mobile web screens, not a general-purpose UI kit stretched to fit phones. It only pays off once you're actually building a touch-first, single-column layout — a Vue 3 admin dashboard or wide desktop app gains almost nothing from a picker, action sheet, and swipe-cell set tuned for one-thumb use.
What is Vant
Vant is a Vue component library from Chinese e-commerce company Youzan, built to ship mobile web interfaces rather than desktop dashboards. It packages more than 80 components — buttons, pickers, action sheets, swipe cells, tabbars, steppers — each written in TypeScript and kept small enough that individual components average around 1KB after minification and gzip.
Key features of Vant
- ✓Ships 80+ components with zero third-party runtime dependencies, so the bundle stays lean by default.
- ✓Individual components average roughly 1KB minified and gzipped, per the README's own measurement.
- ✓Supports both Vue 2 and Vue 3, plus Nuxt 2 and Nuxt 3 through a dedicated Vant Nuxt module.
- ✓Tree shaking is built in, so importing a handful of components doesn't drag in the rest of the library.
- ✓Dark mode and a custom theming system for overriding design tokens across the whole library.
- ✓Server-side rendering (SSR) works out of the box, useful for Nuxt-based storefronts.
- ✓Built-in i18n with more than 30 bundled languages.
- ✓The README reports over 90% unit test coverage, and the whole library is written in TypeScript.
Installing Vant in your Vue project
For a Vue 3 project, run `npm i vant` to pull the current release; if you're still on Vue 2, install the frozen `vant@latest-v2` tag instead so you don't pick up breaking changes. Yarn, pnpm, and Bun all work the same way — swap `npm i` for `yarn add`, `pnpm add`, or `bun add`. The README also points to Rsbuild, a build tool from the same author, as the recommended way to scaffold a new project via `npm create rsbuild@latest`, though that step is optional if you already have a Vue build set up.
Using your first Vant component
Vant follows the same per-component import pattern most Vue libraries use: import the piece you need from `vant`, pull in its CSS separately, then register it on the app instance. Styles aren't bundled automatically. The README's quickstart example imports `Button`, imports `vant/lib/index.css` for styling, and registers it with `app.use(Button)` before mounting — so styles stay opt-in per component rather than one global stylesheet.
When to choose Vant
- •Mobile-first web apps and H5 pages served inside WeChat's in-app browser, Vant's original use case at Youzan.
- •E-commerce or checkout flows needing touch-friendly pickers, steppers, and swipe-to-delete cart items.
- •Server-rendered storefronts built with Nuxt, since Vant ships SSR support and a dedicated Nuxt module.
- •Teams still on Vue 2 who need a stable, actively maintained component set instead of migrating everything to Vue 3 first.
What developers like about Vant
- ✓Component-level tree shaking means you only ship the CSS and JS for what you import, not the whole library.
- ✓Dark mode and theme variables are built in rather than bolted on through a separate plugin.
- ✓Supporting both Vue 2 and Vue 3 side by side makes it a safe pick for teams mid-migration.
- ✓TypeScript types ship with the library itself, so editors get autocomplete without a separate @types package.
Limitations and trade-offs
- △Desktop support isn't native — using Vant components outside a touch screen needs the separate vant-touch-emulator package to simulate touch events with a mouse.
- △Accessibility support is explicitly marked "still improving" in the README, not a finished, audited feature.
- △Vant 2 requires Android 4.0+ and iOS 8.0+, and Vant 3/4 requires Chrome 51+ and iOS 10.0+, so genuinely old devices can fall outside support.
- △Youzan is a Chinese company, and the README ships separate Chinese and Japanese intro pages alongside the English one — some community ecosystem projects, like vant-theme, document only in Chinese.
Alternatives to Vant
Frequently asked questions
Vant is released under the MIT license, so it's free to use in commercial projects. MIT permits using, modifying, and redistributing Vant's source without paying a license fee, as long as the original copyright notice stays in the codebase. That covers building and shipping products, including apps you sell.
Vant supports both: the current `vant` package targets Vue 3, and installing `vant@latest-v2` gives you the frozen Vue 2-compatible release. Vant 2 and Vant 3/4 also target slightly different browser baselines, so pick the install command that matches your project's Vue version rather than mixing them.
Vant ships built-in custom theme support, listed in the README as one of its core features alongside dark mode. Vant exposes theme variables you override to change colors and spacing across every component at once, rather than needing to restyle each component's CSS individually. Exact variable names live in Vant's own documentation.
Vant's accessibility support exists but is explicitly labeled "still improving" in the project's own README, not a finished or audited feature. Vant hasn't published accessibility conformance numbers, so treat strict WCAG compliance as something to verify against your own components before shipping.
Vant's README states components average around 1KB each after minification and gzip, and the library ships zero third-party runtime dependencies. Combined with built-in tree shaking, importing only the components you use — like a single Button — keeps your actual bundle far smaller than pulling in the whole library.
Vant works with Nuxt: the README lists support for both Nuxt 2 and Nuxt 3, and the team maintains a dedicated Vant Nuxt module for wiring it into a Nuxt project. Vant also supports server-side rendering (SSR) directly, which Nuxt relies on for its rendering pipeline.
The problem it solves
Building a mobile web page in Vue from scratch means writing your own action sheets, swipe-to-delete lists, and touch-friendly pickers, then hand-tuning each one for a small screen. Vant packages roughly 80 of those exact components so a Vue team doesn't reinvent Youzan's own mobile UI kit for every new H5 page or checkout flow.
Who should try it — and who should skip
Vue developers building a mobile web app, H5 campaign page, or Nuxt-powered storefront get a component set already shaped for touch — pickers, action sheets, swipe cells — without assembling one from generic UI primitives. Teams building a desktop-first dashboard or admin panel should look elsewhere: Vant's components default to mobile viewports, and retrofitting them for mouse-and-keyboard use means bolting on the separate touch-emulator package instead of using a library actually designed for the job.
Related repositories
Curious whether vant is right for you?
Let ChatGPT, Claude, or Perplexity look into it — click below and see what AI actually says about vant.