# Vant — Lightweight Vue 3 Mobile UI Component Library

> A lightweight and customizable Vue 3 UI library designed for mobile web applications. Provides 70+ high-quality components, comprehensive TypeScript support, and theme customization via CSS variables.

## Install

Save as a script file and run:

# Vant — Lightweight Vue 3 Mobile UI Component Library

## Quick Use
```bash
npm i vant
# In main.ts:
# import { createApp } from 'vue';
# import { Button } from 'vant';
# import 'vant/lib/index.css';
# createApp(App).use(Button).mount('#app');
```

## Introduction
Vant is an open-source mobile UI library created by Youzan, one of China's largest e-commerce SaaS platforms. It provides a complete set of production-tested components optimized for mobile touch interactions, performance on low-end devices, and small bundle sizes through tree-shaking.

## What Vant Does
- Supplies 70+ mobile-optimized components including tabs, swipe cells, pull-to-refresh, and infinite scroll
- Supports on-demand import with automatic tree-shaking via the unplugin-vue-components plugin
- Provides theme customization through CSS custom properties without a build step
- Offers SSR compatibility for Nuxt.js and other server-rendering setups
- Includes accessibility features with ARIA attributes on interactive components

## Architecture Overview
Vant is built as a monorepo using a custom CLI tool (`@vant/cli`) that handles component scaffolding, documentation generation, and the build pipeline. Each component is a self-contained directory with its template, script, styles, tests, and demo. The build produces ES modules, CommonJS, and UMD bundles. Styles use CSS variables for theming, compiled from Less source files. The documentation site is generated from markdown files co-located with each component.

## Self-Hosting & Configuration
- Install via npm and import components individually or register them globally
- Use `unplugin-vue-components` with `VantResolver` for automatic on-demand imports
- Override theme variables by setting CSS custom properties on `:root` or a wrapper element
- Configure `vant.config.mjs` when using the Vant CLI for custom component libraries
- Add locale packs from `vant/es/locale/lang/` for internationalization

## Key Features
- Small footprint with individual component bundles averaging 1-5 KB gzipped
- Built-in dark mode support via the `ConfigProvider` theme prop
- Form validation system with async rule support and field-level error messages
- Lazyload directive for images with placeholder and error state handling
- Active maintenance with weekly releases and a large contributor community

## Comparison with Similar Tools
- **Element Plus** — targets desktop-first Vue 3 apps; Vant is mobile-first with touch-optimized interactions
- **Naive UI** — desktop component library with a TypeScript-driven API; Vant focuses on mobile UX patterns
- **Ant Design Mobile** — React-based mobile library; Vant is Vue-native
- **NutUI** — JD's Vue 3 mobile library with a similar scope; Vant has a larger ecosystem and longer track record

## FAQ
**Q: Can I use Vant with Vue 2?**
A: Vant 2.x supports Vue 2 but is in maintenance mode. Vant 4.x requires Vue 3.

**Q: How do I customize the theme without Less?**
A: Use CSS custom properties. Vant exposes variables like `--van-primary-color` that you can override in plain CSS.

**Q: Does Vant work with Nuxt 3?**
A: Yes, install `@vant/nuxt` for automatic component resolution and SSR support.

**Q: Is Vant production-ready?**
A: Yes, it powers thousands of production apps at Youzan and in the broader Vue ecosystem.

## Sources
- https://github.com/youzan/vant
- https://vant-ui.github.io/vant/

---
Source: https://tokrepo.com/en/workflows/asset-a94146ce
Author: Script Depot