Vant: A Vue 2.0 Mobile UI Library

vant

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：

qrcode

Documentation, is available at https://www.youzanyun.com/zanui/vant.

Features

  • 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+.

Installation

There are several options to setup and start using it.

Run

npm i vant -S

Using the following you can import all the components:

main.js

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

Vue.use(Vant)

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">
  <van-checkbox
    v-for="(item, index) in list"
    :key="index"
    :name="item"
  >
    Checkbox {{ item }}
  </van-checkbox>
</van-checkbox-group>

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.