Vue.js Mobile UI Components Library – Vant

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:

Vue.js Mobile UI Components Library - vant

Changelog:

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

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 vant@next -S

Add Comment