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

Add Comment