Vant UI Library

Vant is a lightweight, customizable mobile UI component library. It is designed for mobile web applications and provides over 80 high-quality components covering mainstream mobile scenarios.

Key features include:

• High Performance: Average component size is less than 1KB (min+gzip).
• Zero Dependencies: Does not rely on third-party npm packages.
• TypeScript Support: Written in TypeScript with full type definitions.
• Framework Support: Available for Vue 2, Vue 3, and WeChat Mini Programs. Also supports Nuxt 2 and Nuxt 3 via the Vant Module.
• Customization: Supports theme customization with over 700 built-in theme variables, dark mode, and internationalization (30+ languages).
• Modern Tooling: Supports Tree Shaking, on-demand loading, and Server-Side Rendering (SSR).

Vant is a lightweight, customizable mobile UI component library with the following key features:

• Performance: High performance with average component size < 1KB (min+gzip).
• Rich Component Set: 80+ high-quality components for mobile scenarios.
• Zero Dependencies: Does not rely on third-party npm packages.
• TypeScript Support: Written in TypeScript with full type definitions.
• Stability: Over 90% unit test coverage.
• Customization: Supports theme customization with 700+ built-in theme variables.
• Modern Web Support: Supports Tree Shaking, on-demand loading, dark mode, accessibility (A11y), and Server-Side Rendering (SSR).
• Framework Support: Supports Vue 2, Vue 3, WeChat Mini Programs, Nuxt 2, and Nuxt 3 (via Vant Module).

Vant CLI is a Vue component library build tool based on Rsbuild. It provides a complete workflow from development and testing to building and releasing. Key features include:

• High Performance: Powered by Rsbuild for an excellent development experience.
• Full Lifecycle Commands: Covers development, testing, building, and releasing.
• Automatic Documentation: Automatically generates elegant documentation sites and component examples based on a convention-based directory structure.
• Optimized Output: Built component libraries support tree shaking, theme customization, and on-demand imports by default.

The following official projects are part of the Vant ecosystem:

• vant-weapp: WeChat MiniProgram UI.
• vant-demo: A collection of Vant component demos.
• vant-cli: A scaffold for building UI libraries.
• vant-icons: The official Vant icon set.
• vant-touch-emulator: Enables using Vant in desktop browsers.
• vant-nuxt: A dedicated Vant module for Nuxt projects.

You can limit the selectable time range using two different methods:

1. Individual unit limits

Use min-hour, max-hour, min-minute, max-minute, min-second, and max-second to set boundaries for specific units.

<van-time-picker
  v-model="currentTime"
  :min-hour="10"
  :max-hour="20"
  :min-minute="30"
  :max-minute="40"
/>

2. Overall time range (v4.5.0+)

Use min-time and max-time with the format HH:mm:ss. Note: When min-time is set, individual unit limits like min-hour are ignored. Similarly, max-time overrides max-hour and other max unit props.

<van-time-picker
  v-model="currentTime"
  :columns-type="['hour', 'minute', 'second']"
  min-time="09:40:10"
  max-time="20:20:50"
/>

You can control how many lines are displayed and where the ellipsis appears using the rows and position props.

• rows: Limits the number of displayed lines (defaults to 1).
• position: Controls the ellipsis position. Supported values are start (for head truncation) and middle (for middle truncation). The default is end.

<!-- Custom rows and start position -->
<van-text-ellipsis
  rows="3"
  :content="text"
  expand-text="展开"
  collapse-text="收起"
  position="start"
/>

PickerGroup supports two modes of tab switching:

1. Uncontrolled Mode: If v-model:active-tab is not bound, PickerGroup manages tab switching internally (e.g., via the next-step-text button or manual tab clicks).
2. Controlled Mode: If v-model:active-tab is bound, the active tab is controlled by both the component's internal logic and the provided value.

<van-picker-group
  v-model:active-tab="activeTab"
  title="Title"
  :tabs="['Date', 'Time']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-date-picker v-model="currentDate" />
  <van-time-picker v-model="currentTime" />
</van-picker-group

The area-list prop requires an object with three specific keys: province_list, city_list, and county_list. Each key maps a 6-digit area code (string) to its corresponding name (value). The area code follows a pattern where the first two digits represent the province, the middle two the city, and the last two the county/district.

const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
};

The Popover can be used in two modes:

1. Controlled Mode: Bind v-model:show. The visibility is strictly managed by the provided variable.
2. Uncontrolled Mode: Do not bind v-model:show. You can provide an initial value via the show prop, but the component manages its own internal visibility state.

<!-- Uncontrolled Mode -->
<van-popover :actions="actions" placement="top-start" @select="onSelect">
  <template #reference>
    <van-button type="primary">Uncontrolled</van-button>
  </template>
</van-popover>

The useRelation pattern (implemented via useChildren and useParent) establishes a communication link between parent and child components using Vue's provide and inject mechanisms.

• The Parent uses useChildren(key) to obtain a linkChildren method. Calling linkChildren(value) allows the parent to pass data or methods down to its children.
• The Child uses useParent(key) to access the data or methods provided by the parent.

To avoid collisions, you should use a unique Symbol as the key for the relation.

import { ref } from 'vue';
import { useChildren, useParent } from '@vant/use';

const RELATION_KEY = Symbol('my-relation');

// In Parent Component
// const { linkChildren } = useChildren(RELATION_KEY);
// linkChildren({ data, method });

// In Child Component
// const { parent } = useParent(RELATION_KEY);
// parent.method();