Guide · Open source
How to use vant-weapp: install and add UI components to a Mini Program
Updated · written with AI from the project's own documentation and checked against our catalogue data
Vant Weapp is an open-source UI component library for WeChat Mini Programs, the small apps that run inside the WeChat app. It gives you ready-made components such as buttons so you do not have to build each control from scratch. This guide shows how to install it, register a component on a page, and preview the examples in WeChat Developer Tools.
Vant Weappyouzan/vant-weapp · ★ 18.5k · MIT Install options & downloads Quick start
- 1Check prerequisites. Install WeChat Developer Tools, Node.js and npm or yarn, and confirm you know the basics of Mini Program development.
- 2Install the package. Run npm i @vant/weapp -S --production in your project, or use the yarn command from the README.
- 3Register the component. Add the component path under usingComponents in the page's JSON file, such as van-button.
- 4Use the tag in WXML. Place the component tag, for example van-button with type set to primary, in the page's WXML file.
- 5Run the build for the examples. Clone the repository if you want the examples, then run npm install and npm run dev as the README describes.
- 6Preview in WeChat Developer Tools. Open WeChat Developer Tools and add the vant-weapp/example directory to see the sample pages.
What you need before you start
The README says you should already be familiar with the official WeChat Mini Program basics. Read the official simple tutorial and the custom component introduction before you install Vant Weapp.
Vant Weapp supports Mini Program base library 2.6.5 and above, according to the README.
- WeChat Developer Tools
- Node.js and npm or yarn
- Basic knowledge of Mini Program pages and custom components
Install Vant Weapp with npm or yarn
The README recommends installing with npm. Run the command from your Mini Program project folder. Yarn users can use the yarn command instead.
The README also notes that version 0.x can be installed with a separate package name, vant-weapp.
- npm is the recommended method
- yarn is an alternative
- Install 0.x with the vant-weapp package name
npm i @vant/weapp -S --production
yarn add @vant/weapp --productionDownload the source code instead (optional)
If you do not want to use a package manager, the README says you can clone the repository with git and copy the dist directory into your own project.
git clone https://github.com/youzan/vant-weapp.gitRegister a component and use it in a page
Components are enabled per page. In the page's JSON file, add the component under usingComponents, pointing to its path. The README's example uses the button component, with the path set to your copy of vant-weapp. Replace the example path with the actual location in your project.
After registering the component, you can use it in the page's WXML file. The README example shows a primary button with the label 按钮, which means button in Chinese.
- Open the page's .json file and add the usingComponents entry
- Open the page's .wxml file and place the tag where you need it
{
"usingComponents": {
"van-button": "/path/to/vant-weapp/dist/button/index"
}
}
<van-button type="primary">按钮</van-button>Preview the examples in WeChat Developer Tools
To see the examples, the README says to install dependencies and run the build step in the repository. Then open WeChat Developer Tools and add the vant-weapp/example directory as a project.
The README notes that the online demo Mini Program may not be the latest version because of WeChat review rules. Cloning the code and previewing it locally gives you the current examples.
For the van-area component, the README says the region data can be imported into the cloud development environment from vant-weapp/example/database_area.JSON.
npm install
npm run devWhat people use it for
- Adding standard buttons to a WeChat Mini Program shop or booking page
- Building a consistent mobile look across several Mini Program pages without designing every control
- Using the area picker component with region data loaded into a WeChat cloud database
Frequently asked questions
Is vant-weapp free to use?
Yes. The repository is licensed under MIT, which the README says lets you freely use and contribute to the project. Check the license file in the repository for the full terms.
What do I need to install vant-weapp?
The README lists WeChat Developer Tools, Node.js and npm or yarn as prerequisites. You also need to know the basics of WeChat Mini Program development.
Can I use vant-weapp on a normal web page?
No. Vant Weapp is only for WeChat Mini Programs. For web pages, the README points to the separate Vue 2 and Vue 3 versions of Vant.
Does vant-weapp work with Alipay Mini Programs?
The README says the Alipay Mini Program version is a separate community project, so it is not part of this repository.
What is the minimum Mini Program base library version?
The README says Vant Weapp supports base library 2.6.5 and above.
Why does the online demo look different from the code in the repository?
The README explains that the demo Mini Program is not always the latest version because of WeChat review restrictions. Clone the code and preview the example directory locally to see the current version.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Vant Weapp suits developers who already know the WeChat Mini Program framework and want tested, ready-made components with a consistent mobile look. If you build web pages, native iOS or Android apps, or need an Alipay Mini Program version, pick a different library or the separate community project the README mentions. Other comparable options named in the analysis include Taro UI, WeUI and uView.
Install options & downloads