Vant: A Vue 2.0 Mobile UI Library


Vant is a library of UI components created for mobile applications, based on Vue.js. It lists many components like Action Components which can provide their own methods & options.

Demo Pages

You can scan the following QR code to access the demo:


Documentation, is available at


  • Components come from wechat mall business of YouZan
  • Custom Themes
  • Extensive documentation and demos.
  • Support babel-plugin-import
  • Unit test coverage over 90%
  • Not only have the basic components but also have a lot of business components
  • Internationalization (The default language of Vant is Chinese)
  • Support for Modern browsers and Android 4.0+, iOS 6+.


There are several options to setup and start using it.


npm i vant -S

Using the following you can import all the components:


import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'


The above gives you access to use any component in your project. For example, if you need checkboxes you can use the following:

When Checkboxes are inside a CheckboxGroup, the checked checkboxes' name is an array and bound with CheckboxGroup by v-model.

<van-checkbox-group v-model="result">
    v-for="(item, index) in list"
    Checkbox {{ item }}

export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      result: ['a', 'b']

Every component has a live preview in mobile:

Other useful links

The project is open-source under an MIT licence.