Vant is a lightweight and highly customizable UI component library designed for mobile web applications built with Vue.js. The current stable version series is 4.x, specifically 4.9.24 for Vue 3 projects, while Vant 2.x (e.g., 2.13.9) continues to support Vue 2. The library maintains an active release cadence, frequently adding new features, bug fixes, and improvements within its major versions. Key differentiators include its small bundle size (1KB average per component min+gzip), over 80 high-quality components, zero third-party dependencies, strong TypeScript support, extensive documentation, and comprehensive feature set including tree-shaking, custom themes, accessibility, dark mode, SSR, and i18n with 30+ built-in languages. It also provides dedicated modules for Nuxt 2 and Nuxt 3.
npm install vantVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to set up a basic Vue 3 application, import Vant components (Button, Toast), register them globally, and include the necessary CSS styles to render a functional Vant button and show a toast message.
For Vue 3 projects, use `npm i vant`. For Vue 2 projects, use `npm i vant@latest-v2`. Review the official Vant 3/4 migration guide and Vue 3 migration guide for detailed steps.
Ensure `import 'vant/lib/index.css';` is included in your main application entry file (e.g., `main.js`/`main.ts`) or a global style entry point. If using a CSS preprocessor, you might need to import the `.less` or `.scss` variant and configure your build.
Refer to the Vant documentation for the specific auto-import resolver (e.g., `@vant/auto-import-resolver`) and its configuration in your build tool (Vite, Webpack, etc.). Often, a post-processor like PostCSS is also required for proper theme customization and unit conversion.
Always use `import { ComponentName } from 'vant';` for individual components to leverage tree-shaking effectively. If you are using a bundler with proper configuration (e.g., Vite), this should work out of the box.For desktop development or testing, consider installing and importing `vant-touch-emulator` to simulate touch events. For production desktop apps, consider a different UI library or extensive custom styling for Vant components.
Ensure all Vant components used in templates are explicitly registered with your Vue application instance via `app.use(ComponentName);` or are automatically imported through a build tool plugin.
Verify the correct import path and ensure the symbol being used is indeed a Vue plugin (e.g., `Button` is not a plugin directly, but a component. `Toast` or `Dialog` can be installed as plugins or used via their API methods after importing their functions).
Ensure your project is configured for ES modules, typically by setting `"type": "module"` in `package.json` or by using a modern bundler like Vite/Webpack configured for ESM output. If targeting an older Node.js environment, consider a transpilation step.