Vant is a lightweight, customizable Vue UI library for mobile web apps, built for front-end developers and teams that ship mobile-first interfaces with Vue 2 or Vue 3.

What it is

Vant is a mobile-first user interface component library for Vue, distributed under the MIT licence and written in TypeScript. It contains more than 80 components, averages roughly 1KB per component at min+gzip, and ships with zero third-party dependencies. The project targets the Vue ecosystem directly: it supports both Vue 2 and Vue 3, supports both Nuxt 2 and Nuxt 3 through the separate Vant Module, and documents browser support that runs from Android 4.0 and iOS 8.0 for Vant 2 up to Chrome 51 and iOS 10.0 for Vant 3 and 4.

The concrete problem it solves is the cost of assembling mobile interface primitives by hand. Instead of writing and maintaining buttons, forms, pickers, lists and navigation patterns for touch screens, a team installs the package and registers only the components it needs, which is why tree shaking and per-component style imports such as vant/lib/index.css are part of the standard setup. Themes are customizable, dark mode is supported, internationalization ships with more than 30 built-in languages, and server-side rendering is supported, so the library covers the interface layer that a mobile web application would otherwise have to build for itself.

Key capabilities

• More than 80 high-quality components, with an average size of 1KB per component at min+gzip.
• Zero third-party runtime dependencies, with unit test coverage above 90%.
• Written in TypeScript, with support for Vue 2 and Vue 3 and for Nuxt 2 and Nuxt 3 through the vant-nuxt module.
• Tree shaking support paired with per-component style imports such as vant/lib/index.css.
• Custom themes, dark mode, server-side rendering, and accessibility support that the README describes as still improving.
• Built-in internationalization covering more than 30 languages.
• Sketch and Axure design resources published alongside the code for design handoff.

Who uses it and how

• Vue 3 mobile web teams install vant, register the components they need, and import the stylesheet once, as shown in the Quickstart.
• Vue 2 projects still on the older branch install vant@latest-v2, which extends browser support back to Android 4.0 and iOS 8.0.
• Nuxt teams add the vant-nuxt module, while community templates such as vue3-vant-mobile and vue3-h5-template provide out-of-the-box mobile project scaffolds.
• WeChat MiniProgram developers use the sibling project vant-weapp to carry the same visual language outside the browser.
• Developers testing touch interactions on desktop use vant-touch-emulator, and the community vant-theme project provides an online theme preview.

Getting started

Install with npm i vant for Vue 3, or npm i vant@latest-v2 for Vue 2; yarn add vant, pnpm add vant and bun add vant are also documented. The README recommends scaffolding a new project with Rsbuild, created through npm create rsbuild@latest, which provides first-priority support for Vant.

How it compares

No list of paid products is provided in the facts, and the registry names no direct rival Vue mobile UI kit. The similar projects that are named are derivatives rather than alternatives: react-vant, @antmjs/vantui and Taroify rebuild the same component set for React and Taro, while vant-weapp carries it to WeChat MiniPrograms. On that evidence, Vant stands alone in this registry as the Vue-based mobile UI library.

When to use it — and when not to

Vant is a library rather than a hosted service, so there is no database, storage layer or mail server for a self-hoster to operate; the operational cost is limited to keeping the package and its build toolchain current. Teams that are not on Vue, or that are not targeting mobile web, should not pick it and should look at the community React and Taro ports instead. The clearest weakness stated in the facts is that accessibility support is described as still improving, so accessibility-critical products should verify component behaviour rather than assume it.

# install latest Vant for Vue 3 project
npm i vant

# install Vant 2 for Vue 2 project
npm i vant@latest-v2

# with yarn
yarn add vant

# with pnpm
pnpm add vant

# with Bun
bun add vant

npm create rsbuild@latest

import { createApp } from 'vue';
// 1. Import the components you need
import { Button } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';

const app = createApp();

// 3. Register the components you need
app.use(Button);