vant is a mobile UI kit for vue.js 2 and vue.js 3 that makes it simple to create mobile-friendly, nice-looking UI components.
Features:
- 70+ Reusable components
- Lightweight
- Support Vue 2 & Vue 3
- Support Custom Theme
- Support i18n
- Support TS
- Support SSR
UI Components Included:
- Button
- Cell
- Icon
- Image
- Layout
- Popup
- Built-in style
- Toast
- Calendar
- Cascader
- Checkbox
- DatetimePicker
- Field
- Form
- NumberKeyboard
- PasswordInput
- Picker
- Radio
- Rate
- Search
- Slider
- Stepper
- Switch
- SwitchCell
- Uploader
- ActionSheet
- Dialog
- DropdownMenu
- Loading
- Notify
- Overlay
- PullRefresh
- ShareSheet
- SwipeCell
- Badge
- Circle
- Collapse
- CountDown
- Divider
- Empty
- ImagePreview
- Lazyload
- List
- NoticeBar
- Popover
- Progress
- Skeleton
- Steps
- Sticky
- Swipe
- Tag
- Grid
- IndexBar
- NavBar
- Pagination
- Sidebar
- Tab
- Tabbar
- TreeSelect
- AddressEdit
- AddressList
- Area
- Card
- ContactCard
- ContactEdit
- ContactList
- Coupon
- GoodsAction
- SubmitBar
- Sku
How to use it:
1. Import UI components of your choice.
import Vue from 'vue';
import { Button } from 'vant';
2. Register the UI component.
Vue.use(Button);
// OR
Vue.component(Button.name, Button);
// OR GLOBALLY
export default {
components: {
[Button.name]: Button,
},
};
3. Happy coding.
Preview:
Changelog:
v4.4.0 (05/22/2023)
- add new Barrage component
- Cascader: scroll the selected option into view when switching tabs
- Divider: add vertical prop
- Document: sync mobile position on anchor click
- ImagePreview: optimize the preview effect of long images
- Signature: improve signature clarity by devicePixelRatio
- Uploader: add reupload prop
- Bug Fixes
v4.3.2 (05/14/2023)
- ImagePreview: use the touched point as the center of zooming
- PickerGroup: the tab of PickerGroup supports controlled mode
- Checkbox: disabled unchecked options when the limit is exceeded
- Bug Fixes
v4.3.1 (05/03/2023)
- Bugfix
v4.3.0 (05/02/2023)
- add new Signature component
- Field: increase default icon size to 18px
- bugfix
v4.2.1 (04/30/2023)
- Pagination: add show-prev-button, show-next-button props
- Picker: add scroll-into event
- Bug Fixes
v4.2.0 (04/16/2023)
- add new Watermark component
- ShareSheet: allow custom icon
- TextEllipsis: add dots prop
- Bug Fixes
v4.1.1 (03/20/2023)
- Uploader: support avif image format
- Bug Fixes
v4.1.0 (03/05/2023)
- add new TextEllipsis component
- Swipe: add index param to drag-start/drag-end event
- TreeSelect: add nav-text slot
- Bug Fixes
v4.0.11 (02/19/2023)
- Add new vant-nuxt module for Nuxt
- BackTop: support css variable and prop of z-index
- Picker: expose option index to option slot
- @vant/use: support cleanup useEventListener
- Bug Fixes
v2.12.54 (02/12/2023)
- Updated for Vue 2 version
v4.0.10 (02/02/2023)
- Bugfixes
v4.0.10 (02/02/2023)
- Bugfixes
v4.0.9 (01/26/2023)
- BackTop: add immediate prop
- Calendar: add month-title slot
- Cascader: add useCascaderAreaData method
- ImagePreview: allow swipe when image is moved to edge
- Locale: add Esperanto translations
- Locale: add useCurrentLang method
- Swipe: add drag-start, drag-end event
- Bug Fixes
v4.0.8 (01/15/2023)
- PickerGroup: add next-step-text prop
- Bug Fixes
v4.0.7 (01/01/2023)
- Bugfixes
v4.0.6 (12/26/2022)
- Bugfixes
v4.0.5 (12/25/2022)
- Locale: add Dutch lang
- Locale: add Mongolian lang
- Bugfixes
v4.0.4 (12/22/2022)
- Bugfixes
v4.0.3 (12/12/2022)
- Bugfixes
v4.0.2 (12/03/2022)
- Bugfixes
v4.0.1 (12/01/2022)
- Bugfixes
- Picker: add selectedIndexes to the confirm event
v4.0.0 (11/28/2022)
- Bugfixes
v3.6.6 (11/22/2022)
- Bugfixes
v2.12.53 (11/08/2022)
- Bug Fixes
v3.6.5 (11/07/2022)
- ImagePreview: add preview image slot
- Bug Fixes
v2.12.51 (11/07/2022)
- Bug Fixes
v3.6.4 (10/07/2022)
- Bug Fixes
v3.6.3 (09/16/2022)
- Dialog: message-align can be justify
- Image: add block prop
- Bug Fixes
v2.12.50 (09/16/2022)
- Bug Fixes
v2.12.49 (09/05/2022)
- Bug Fixes
v3.6.2 (09/04/2022)
- Bug Fixes
v3.6.1 (08/24/2022)
- add correct passive flag to improve scroll performance
- @vant/use: improve useEventListener typing
- Bug Fixes
v3.6.0 (08/20/2022)
- Add new component Space
- ConfigProvider: add z-index prop
- Form: add validateEmpty option of rule
- Popup: add role and tabindex for a11y
- TouchEmulator: support .mjs extension
- Bug Fixes
v3.5.4 (08/06/2022)
- Calendar: add getSelectedDate method
- Collapse: add toggleAll method
- Bug Fixes
v3.5.3 (07/30/2022)
- Calendar: add getSelectedDate method
- Collapse: add toggleAll method
- Bug Fixes
v3.5.2 (06/26/2022)
- ActionBar: add placeholder prop
- Field: add start-validate and end-validate event
- SubmitBar: add placeholder prop
- Bug Fixes
v2.12.48 (06/25/2022)
- Steps: add center prop
- Bug Fixes
v3.5.0 (06/11/2022)
- PullRefresh: added change event
- Bug Fixes
v3.4.9 (05/01/2022)
- Form: support setting multiple validate-trigger
- Empty: localize all images #10514
- Loading: add aria to improve a11y
- Bug Fixes
v3.4.8 (04/16/2022)
- CalendarDay: add default margin-bottom
- Empty: support set the image size separately
- Field: add enterkeyhint prop
- Form: add getValues method
- Icon: add some icons for ShareSheet
- Locale: add Danish lang
- ShareSheet: no longer rely on CDN images
- Add event arguments in web-types.json
- Bug Fixes
v2.12.46 (03/29/2022)
- TabBar: fix route matching in special cases
v2.12.45 (03/13/2022)
- Sku: Fixed a syntax error when skuTree is an empty array in special cases
- Dialog: support keyboard events
v3.4.6 (03/13/2022)
- Style: add van-safe-area-top class
- Calendar: add safe-area-inset-top prop
- Popup: add safe-area-inset-top prop
- Bug Fixes
Download Details:
Author: youzan
Live Demo: https://www.youzanyun.com/zanui/vue/component/quickstart
Download Link: https://github.com/youzan/vant/archive/dev.zip
Official Website: https://github.com/youzan/vant
Install & Download:
# Vue 2
npm i vant -S
# Vue 3
npm i [email protected] -S