Package Exports
- vant
- vant/es/action-sheet
- vant/es/action-sheet/style
- vant/es/action-sheet/style/less
- vant/es/area
- vant/es/area/style
- vant/es/area/style/less
- vant/es/badge
- vant/es/badge/style
- vant/es/button
- vant/es/button/style
- vant/es/button/style/less
- vant/es/calendar
- vant/es/calendar/style
- vant/es/calendar/style/less
- vant/es/card
- vant/es/card/style
- vant/es/card/style/less
- vant/es/cascader
- vant/es/cascader/style
- vant/es/cascader/style/less
- vant/es/cell
- vant/es/cell-group
- vant/es/cell-group/style
- vant/es/cell-group/style/less
- vant/es/cell/style
- vant/es/cell/style/less
- vant/es/checkbox
- vant/es/checkbox-group
- vant/es/checkbox-group/style
- vant/es/checkbox-group/style/less
- vant/es/checkbox/style
- vant/es/checkbox/style/less
- vant/es/circle
- vant/es/circle/style
- vant/es/circle/style/less
- vant/es/col
- vant/es/col/style
- vant/es/col/style/less
- vant/es/collapse
- vant/es/collapse-item
- vant/es/collapse-item/style
- vant/es/collapse-item/style/less
- vant/es/collapse/style
- vant/es/collapse/style/less
- vant/es/contact-card
- vant/es/contact-card/style
- vant/es/contact-edit
- vant/es/contact-edit/style
- vant/es/count-down
- vant/es/count-down/style
- vant/es/count-down/style/less
- vant/es/coupon-cell
- vant/es/coupon-cell/style
- vant/es/coupon-list
- vant/es/coupon-list/style
- vant/es/datetime-picker
- vant/es/datetime-picker/style
- vant/es/datetime-picker/style/less
- vant/es/dialog
- vant/es/dialog/style
- vant/es/dialog/style/less
- vant/es/divider
- vant/es/divider/style
- vant/es/divider/style/less
- vant/es/dropdown-item
- vant/es/dropdown-item/style
- vant/es/dropdown-item/style/less
- vant/es/dropdown-menu
- vant/es/dropdown-menu/style
- vant/es/dropdown-menu/style/less
- vant/es/empty
- vant/es/empty/style
- vant/es/empty/style/less
- vant/es/field
- vant/es/field/style
- vant/es/field/style/less
- vant/es/form
- vant/es/form/style
- vant/es/form/style/less
- vant/es/grid
- vant/es/grid-item
- vant/es/grid-item/style
- vant/es/grid-item/style/less
- vant/es/grid/style
- vant/es/grid/style/less
- vant/es/icon
- vant/es/icon/style
- vant/es/icon/style/less
- vant/es/image
- vant/es/image-preview
- vant/es/image-preview/style
- vant/es/image-preview/style/less
- vant/es/image/style
- vant/es/image/style/less
- vant/es/index-anchor
- vant/es/index-anchor/style
- vant/es/index-anchor/style/less
- vant/es/index-bar
- vant/es/index-bar/style
- vant/es/index-bar/style/less
- vant/es/index.js
- vant/es/lazyload
- vant/es/lazyload/style
- vant/es/lazyload/style/less
- vant/es/list
- vant/es/list/style
- vant/es/list/style/less
- vant/es/loading
- vant/es/loading/style
- vant/es/loading/style/less
- vant/es/nav-bar
- vant/es/nav-bar/style
- vant/es/nav-bar/style/less
- vant/es/notice-bar
- vant/es/notice-bar/style
- vant/es/notice-bar/style/less
- vant/es/notify
- vant/es/notify/style
- vant/es/notify/style/less
- vant/es/number-keyboard
- vant/es/number-keyboard/style
- vant/es/number-keyboard/style/less
- vant/es/overlay
- vant/es/overlay/style
- vant/es/overlay/style/less
- vant/es/pagination
- vant/es/pagination/style
- vant/es/pagination/style/less
- vant/es/panel
- vant/es/panel/style
- vant/es/panel/style/less
- vant/es/password-input
- vant/es/password-input/style
- vant/es/password-input/style/less
- vant/es/picker
- vant/es/picker/style
- vant/es/picker/style/less
- vant/es/popover
- vant/es/popover/style
- vant/es/popup
- vant/es/popup/style
- vant/es/popup/style/less
- vant/es/progress
- vant/es/progress/style
- vant/es/progress/style/less
- vant/es/pull-refresh
- vant/es/pull-refresh/style
- vant/es/pull-refresh/style/less
- vant/es/radio
- vant/es/radio-group
- vant/es/radio-group/style
- vant/es/radio-group/style/less
- vant/es/radio/style
- vant/es/radio/style/less
- vant/es/rate
- vant/es/rate/style
- vant/es/rate/style/less
- vant/es/row
- vant/es/row/style
- vant/es/row/style/less
- vant/es/search
- vant/es/search/style
- vant/es/search/style/less
- vant/es/share-sheet
- vant/es/share-sheet/style
- vant/es/share-sheet/style/less
- vant/es/sidebar
- vant/es/sidebar-item
- vant/es/sidebar-item/style
- vant/es/sidebar-item/style/less
- vant/es/sidebar/style
- vant/es/sidebar/style/less
- vant/es/skeleton
- vant/es/skeleton/style
- vant/es/skeleton/style/less
- vant/es/sku/utils/time-helper
- vant/es/slider
- vant/es/slider/style
- vant/es/slider/style/less
- vant/es/step
- vant/es/step/style
- vant/es/step/style/less
- vant/es/stepper
- vant/es/stepper/style
- vant/es/stepper/style/less
- vant/es/steps
- vant/es/steps/style
- vant/es/steps/style/less
- vant/es/sticky
- vant/es/sticky/style
- vant/es/sticky/style/less
- vant/es/swipe
- vant/es/swipe-cell
- vant/es/swipe-cell/style
- vant/es/swipe-cell/style/less
- vant/es/swipe-item
- vant/es/swipe-item/style
- vant/es/swipe-item/style/less
- vant/es/swipe/style
- vant/es/swipe/style/less
- vant/es/switch
- vant/es/switch/style
- vant/es/switch/style/less
- vant/es/tab
- vant/es/tab/style
- vant/es/tab/style/less
- vant/es/tabbar
- vant/es/tabbar-item
- vant/es/tabbar-item/style
- vant/es/tabbar-item/style/less
- vant/es/tabbar/style
- vant/es/tabbar/style/less
- vant/es/tabs
- vant/es/tabs/style
- vant/es/tabs/style/less
- vant/es/tag
- vant/es/tag/style
- vant/es/tag/style/less
- vant/es/toast
- vant/es/toast/style
- vant/es/toast/style/index.js
- vant/es/toast/style/less
- vant/es/tree-select
- vant/es/tree-select/style
- vant/es/tree-select/style/less
- vant/es/uploader
- vant/es/uploader/style
- vant/es/uploader/style/less
- vant/lib/action-sheet
- vant/lib/action-sheet/style
- vant/lib/address-edit
- vant/lib/address-list
- vant/lib/area
- vant/lib/area/style
- vant/lib/badge
- vant/lib/badge/style
- vant/lib/button
- vant/lib/button/style
- vant/lib/button/style/less
- vant/lib/calendar
- vant/lib/calendar/style
- vant/lib/card
- vant/lib/card/style
- vant/lib/cascader
- vant/lib/cascader/style
- vant/lib/cell
- vant/lib/cell-group
- vant/lib/cell-group/style
- vant/lib/cell-group/style/less
- vant/lib/cell/style
- vant/lib/cell/style/less
- vant/lib/checkbox
- vant/lib/checkbox-group
- vant/lib/checkbox-group/style
- vant/lib/checkbox-group/style/less
- vant/lib/checkbox/style
- vant/lib/checkbox/style/less
- vant/lib/circle
- vant/lib/circle/style
- vant/lib/col
- vant/lib/col/style
- vant/lib/col/style/less
- vant/lib/collapse
- vant/lib/collapse-item
- vant/lib/collapse-item/style
- vant/lib/collapse/style
- vant/lib/contact-card
- vant/lib/contact-edit
- vant/lib/contact-list
- vant/lib/count-down
- vant/lib/count-down/style
- vant/lib/count-down/utils
- vant/lib/coupon
- vant/lib/coupon-cell
- vant/lib/coupon-cell/style
- vant/lib/coupon-list
- vant/lib/coupon-list/style
- vant/lib/datetime-picker
- vant/lib/datetime-picker/style
- vant/lib/datetime-picker/style/index.js
- vant/lib/datetime-picker/style/less
- vant/lib/dialog
- vant/lib/dialog/style
- vant/lib/dialog/style/less
- vant/lib/divider
- vant/lib/divider/style
- vant/lib/divider/style/less
- vant/lib/dropdown-item
- vant/lib/dropdown-item/style
- vant/lib/dropdown-item/style/index.js
- vant/lib/dropdown-menu
- vant/lib/dropdown-menu/style
- vant/lib/dropdown-menu/style/index.js
- vant/lib/empty
- vant/lib/empty/style
- vant/lib/field
- vant/lib/field/style
- vant/lib/field/style/index.js
- vant/lib/field/style/less
- vant/lib/form
- vant/lib/form/style
- vant/lib/form/style/less
- vant/lib/goods-action
- vant/lib/goods-action-button
- vant/lib/goods-action-icon
- vant/lib/grid
- vant/lib/grid-item
- vant/lib/grid-item/style
- vant/lib/grid/style
- vant/lib/icon
- vant/lib/icon/local.css
- vant/lib/icon/style
- vant/lib/icon/style/less
- vant/lib/image
- vant/lib/image-preview
- vant/lib/image-preview/style
- vant/lib/image-preview/style/index
- vant/lib/image/style
- vant/lib/index
- vant/lib/index-anchor
- vant/lib/index-anchor/style
- vant/lib/index-bar
- vant/lib/index-bar/style
- vant/lib/index.css
- vant/lib/index.less
- vant/lib/info
- vant/lib/lazyload
- vant/lib/lazyload/style
- vant/lib/list
- vant/lib/list/style
- vant/lib/list/style/less
- vant/lib/loading
- vant/lib/loading/style
- vant/lib/loading/style/less
- vant/lib/locale
- vant/lib/locale/lang/en-US
- vant/lib/locale/lang/zh-CN
- vant/lib/locale/lang/zh-HK
- vant/lib/locale/lang/zh-TW
- vant/lib/nav-bar
- vant/lib/nav-bar/style
- vant/lib/notice-bar
- vant/lib/notice-bar/style
- vant/lib/notify
- vant/lib/notify/style
- vant/lib/notify/style/less
- vant/lib/number-keyboard
- vant/lib/number-keyboard/style
- vant/lib/overlay
- vant/lib/overlay/style
- vant/lib/pagination
- vant/lib/pagination/style
- vant/lib/panel
- vant/lib/panel/style
- vant/lib/panel/style/less
- vant/lib/password-input
- vant/lib/password-input/style
- vant/lib/picker
- vant/lib/picker/index.css
- vant/lib/picker/style
- vant/lib/picker/style/less
- vant/lib/popup
- vant/lib/popup/style
- vant/lib/popup/style/index.js
- vant/lib/popup/style/less
- vant/lib/progress
- vant/lib/progress/style
- vant/lib/pull-refresh
- vant/lib/pull-refresh/style
- vant/lib/pull-refresh/style/less
- vant/lib/radio
- vant/lib/radio-group
- vant/lib/radio-group/style
- vant/lib/radio-group/style/less
- vant/lib/radio/style
- vant/lib/radio/style/less
- vant/lib/rate
- vant/lib/rate/style
- vant/lib/row
- vant/lib/row/style
- vant/lib/row/style/less
- vant/lib/search
- vant/lib/search/style
- vant/lib/search/style/less
- vant/lib/share-sheet
- vant/lib/share-sheet/style
- vant/lib/sidebar
- vant/lib/sidebar-item
- vant/lib/sidebar-item/style
- vant/lib/sidebar/style
- vant/lib/skeleton
- vant/lib/skeleton/style
- vant/lib/sku
- vant/lib/slider
- vant/lib/slider/style
- vant/lib/step
- vant/lib/step/style
- vant/lib/step/style/less
- vant/lib/stepper
- vant/lib/stepper/style
- vant/lib/steps
- vant/lib/steps/style
- vant/lib/steps/style/less
- vant/lib/sticky
- vant/lib/sticky/style
- vant/lib/submit-bar
- vant/lib/swipe
- vant/lib/swipe-cell
- vant/lib/swipe-cell/style
- vant/lib/swipe-cell/style/less
- vant/lib/swipe-item
- vant/lib/swipe-item/style
- vant/lib/swipe-item/style/less
- vant/lib/swipe/style
- vant/lib/swipe/style/less
- vant/lib/switch
- vant/lib/switch-cell
- vant/lib/switch-cell/style
- vant/lib/switch/style
- vant/lib/switch/style/less
- vant/lib/tab
- vant/lib/tab/style
- vant/lib/tab/style/less
- vant/lib/tabbar
- vant/lib/tabbar-item
- vant/lib/tabbar-item/style
- vant/lib/tabbar/style
- vant/lib/tabs
- vant/lib/tabs/style
- vant/lib/tabs/style/less
- vant/lib/tag
- vant/lib/tag/style
- vant/lib/toast
- vant/lib/toast/index.css
- vant/lib/toast/style
- vant/lib/toast/style/index.js
- vant/lib/toast/style/less
- vant/lib/tree-select
- vant/lib/tree-select/style
- vant/lib/uploader
- vant/lib/uploader/style
- vant/lib/utils
- vant/lib/utils/constant
- vant/lib/utils/create/bem
- vant/lib/utils/create/component
- vant/lib/utils/create/i18n
- vant/lib/utils/dom/raf
- vant/lib/utils/functional
- vant/lib/utils/router
- vant/lib/utils/types
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Vant
Mobile UI Components built on Vue
Features
- 65+ Reusable components
- 1kb Component average size (min+gzip)
- 90%+ Unit test coverage
- Extensive documentation and demos
- Support Vue 2 & Vue 3
- Support Tree Shaking
- Support Custom Theme
- Support i18n
- Support TS
- Support SSR
Install
# Install Vant 2 for Vue 2 project
npm i vant -S
# Install Vant 3 for Vue 3 project
npm i vant@next -SQuickstart
import Vue from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';
Vue.use(Button);See more in Quickstart.
Contribution
Please make sure to read the Contributing Guide before making a pull request.
Browser Support
Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
Official Ecosystem
| Project | Description |
|---|---|
| vant-weapp | WeChat MiniProgram UI |
| vant-demo | Collection of Vant demos |
| vant-cli | Scaffold for UI library |
| vant-icons | Vant icons |
| vant-touch-emulator | Using vant in desktop browsers |
Community Ecosystem
| Project | Description |
|---|---|
| 3lang3/react-vant | React mobile UI Components base on Vant |
| mxdi9i7/vant-react | Mobile UI Components built on React and TS, inspired by Vant |
| vant-aliapp | Alipay MiniProgram UI |
| taroify | Vant Taro |
| vant-theme | online theme preview built on Vant UI |
Links
Preview
You can scan the following QR code to access the demo: