Vue.js Mobile UI Components Library – Vant

Install & Download:

# Vue 2
npm i vant -S
# Vue 3
npm i vant@next -S

Description:

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.8.10 (04/06/2024)

• feat(TimePicker): support confirm and getSelectedTime methods
• feat(DatePicker): support confirm and getSelectedDate method
• feat(Coupon): support for checkbox usage

v4.8.8 (03/31/2024)

• feat(image-preview): export onLoad and style for image slot
• feat(AddressList): add event param for click-item
• Bug Fixes

v4.8.7 (03/18/2024)

• update

v4.8.6 (03/17/2024)

• feat(ImagePreview): add vertical prop
• feat(signature): export clear and submit method
• feat: support unplugin-auto-import plugin
• feat(ActionSheet): add icon support to the actions data
• Bug Fixes

v4.8.5 (02/25/2024)

• feat(Image): add crossorigin & referrerpolicy props
• Revert “fix(DropdownMenu): fix recursive update when passing object literal to title-class
• bugfixes

v4.8.4 (02/03/2024)

• feat(Picker): allow to hidden to toolbar buttons
• bugfixes

v4.8.3 (01/20/2024)

• feat(Notify): add teleport prop
• feat(TextEllipsis): add action slot
• feat(ImagePreview): add close-on-click-image prop
• feat(icons): add icon arrow-double-left and arrow-double-right
• feat(Toast): add z-index prop
• Bug Fixes

v4.8.2 (01/03/2024)

• feat: support link css from shadow dom
• feat(DropdownMenu): add auto-locate prop
• perf(CLI): improve markdown compile performance
• Bug Fixes

v4.8.1 (12/17/2023)

• perf(TextEllipsis): reuse windowWidth to avoid repeat calculations
• feat(TextEllipsis): add the toggle instance method
• feat(cli): bump Rsbuild v0.2.2
• perf(cli): disable source map to make compilation faster
• Bug Fixes

v4.8.0 (11/19/2023)

• feat(ImagePreview): expose resetScale method
• feat(Highlight): add highlight component
• feat(Checker): add checked and disabled params to the default slot
• feat(Row): gutter support vertical space
• Bug Fixes

v4.7.3 (10/06/2023)

• feat(locale): Add Arabic Locale
• feat(Form): add required prop and support auto display
• feat(auto-import-resolver): add module option
• style: replace word-break with overflow-wrap
• feat(Tab): add show-header prop
• style(Search): use consistent padding when display error msg
• feat(Signature): expose resize method

v2.13.2 (10/16/2023)

• Sku: add more slots about sku-messages

v2.13.2 (10/16/2023)

• Sku: add more slots about sku-messages

v4.7.2 (10/06/2023)

• feat(Icon): add font-family css var
• fix(Icons): compatible with the browser range of Vant 2
• fix(Uploader): multiple reupload only choose one & cancel chose problem
• refactor(Signature): avoid setting the canvas width and height in the next tick
• refactor(Signature): use scale method to enhance clarity

v2.13.1 (10/10/2023)

• bump @vant/icons v3.0.2

v4.7.1 (10/06/2023)

• feat(FloatingPanel): optimize bounce animate
• feat(cli): using rslog
• style(Swipe): declare transition-property
• feat(Notify): add jsdoc for utility functions
• feat(Dialog): add JSDoc for utility functions
• feat(Toast): add JSDoc for utility functions
• Bug Fixes

v4.7.0 (09/24/2023)

• feat(Calendar): add click-disabled-date event
• feat(Uploader): add –van-uploader-border-radius css variables
• feat(Icon): add 11 new icons
• feat(SwipeCell): Fix triggered close by clickAway when in running beforeClose
• feat(AddressEdit): add change event for name and tel input
• types(Dialog): improve showDialog return type
• Bug Fixes

v2.13.0 (09/17/2023)

• Update icons
• Fix bugs

v4.6.8 (09/10/2023)

• feat(Cell): add css vars to customize font size of the cell value
• feat(ConfigProvider): supplement the type declaration of ConfigProviderThemeVars
• feat(NavBar): add leftDisabled and rightDisabled prop
• Bug Fixes

v4.6.7 (09/04/2023)

• feat(vant-use): add useRaf
• feat(Checkbox): add indeterminate status
• feat(auto-import-resolver): add auto-import-resolver package
• feat(ConfigProvider): add theme-vars-scope props enable root affects
• Bug Fixes

v4.6.6 (08/20/2023)

• feat(DropdownItem): supports boolean Value
• Bug Fixes

v4.6.5 (08/16/2023)

• types(Toast): add ToastWrapperInstance export
• feat(FloatingBubble): use component attrs
• Bug Fixes

v4.6.4 (08/06/2023)

• feat(area-data): update counties of WuHu
• feat(Locale): add Serbian language to internationalization
• feat(ImagePreview): add closeOnClickOverlay option
• feat(List): add scroller prop
• feat(FloatingPanel): add lock-scroll prop
• Bug Fixes

v4.6.3 (07/23/2023)

• AddressList: add show-add-button prop
• CheckboxGroup: add shape prop
• RadioGroup: add shape prop
• Bug Fixes

v3.6.12 (07/20/2023)

• Uploader: support avif image format
• Bug Fixes

v4.6.2 (07/09/2023)

• Field: add autocapitalize, autocorrect and spellcheck props
• FloatingBubble: add CSS vars to override border radius
• Radio: add dot shape
• TextEllipsis: add position prop
• Bug Fixes

v4.6.1 (07/02/2023)

• ellipsis: improve break lines of Chinese, Japanese, or Korean text
• Bug Fixes

v4.6.0 (06/11/2023)

• add new FloatingBubble component
• add new RollingText component
• Rate: add clearable prop
• Bug Fixes

v4.5.0 (06/11/2023)

• add new FloatingPanel component
• AddressList: add new right-icon props
• DropdownMenu: add close method
• Slider: add dragging param for button slot
• TimePicker: add min-time and max-time prop
• TimePicker: add values param for filter method
• CI: add issue helper
• Bug Fixes

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