or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

basic-components.mdbusiness-components.mddisplay-components.mdfeedback-components.mdform-components.mdindex.mdnavigation-components.mdutilities-composables.md
tile.json

tessl/npm-vant

Mobile UI Components library built on Vue 3 with 100+ components

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vant@4.9.x

To install, run

npx @tessl/cli install tessl/npm-vant@4.9.0

index.mddocs/

Vant

Vant is a lightweight, customizable Vue 3 mobile UI component library with 100+ components designed for mobile web applications. It provides a comprehensive set of high-quality components following mobile design patterns, with full TypeScript support and extensive customization options.

Package Information

  • Package Name: vant
  • Package Type: npm
  • Language: TypeScript
  • Framework: Vue 3
  • Installation: npm install vant

Core Imports

import { createApp } from 'vue';
import { Button, Cell, Icon } from 'vant';
import 'vant/lib/index.css';

Global installation:

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

Individual component imports:

import { Button, Toast, Dialog } from 'vant';

Basic Usage

<template>
  <div>
    <!-- Basic button usage -->
    <van-button type="primary" @click="showToast">Click Me</van-button>
    
    <!-- Cell list -->
    <van-cell-group>
      <van-cell title="Cell title" value="Content" />
      <van-cell title="Cell title" value="Content" label="Description" />
    </van-cell-group>
    
    <!-- Form field -->
    <van-field
      v-model="username"
      placeholder="Username"
      left-icon="contact"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button, Cell, CellGroup, Field, Toast } from 'vant';

const username = ref('');

const showToast = () => {
  Toast('Hello Vant!');
};
</script>

Architecture

Vant follows a modular component architecture with several key design patterns:

  • Component System: Each component is self-contained with its own props, events, and slots
  • Theme System: CSS custom properties enable comprehensive theming
  • Vue 3 Integration: Full Composition API support with TypeScript definitions
  • Mobile-First: All components optimized for touch interfaces and mobile viewports
  • Tree Shaking: Individual component imports for optimal bundle sizes
  • Accessibility: WCAG compliance and keyboard navigation support

Capabilities

Basic Components

Core UI building blocks including buttons, cells, icons, and layout components. These form the foundation for mobile interfaces.

import { Button, Cell, CellGroup, Icon, Image, Col, Row, Space } from 'vant';

// Button component with multiple types and sizes
interface ButtonProps {
  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  size?: 'large' | 'normal' | 'small' | 'mini';
  text?: string;
  icon?: string;
  loading?: boolean;
  disabled?: boolean;
}

// Cell component for list items
interface CellProps {
  title?: string;
  value?: string;
  label?: string;
  icon?: string;
  size?: 'large' | 'normal';
  clickable?: boolean;
}

Basic Components

Form Components

Comprehensive form controls including inputs, selectors, and validation components for building complex forms.

import { Field, Checkbox, Radio, Picker, DatePicker, Switch, Stepper } from 'vant';

// Field component for text input
interface FieldProps {
  modelValue?: string | number;
  type?: 'text' | 'number' | 'password' | 'textarea';
  placeholder?: string;
  maxlength?: number;
  readonly?: boolean;
  disabled?: boolean;
  required?: boolean;
}

// Checkbox component
interface CheckboxProps {
  modelValue?: boolean;
  disabled?: boolean;
  shape?: 'square' | 'round';
  iconSize?: string | number;
}

Form Components

Display Components

Components for presenting information including badges, progress indicators, skeleton screens, and media display.

import { Badge, Progress, Empty, Skeleton, Image, Tag, Circle } from 'vant';

// Progress component
interface ProgressProps {
  percentage?: number;
  strokeWidth?: string | number;
  color?: string;
  trackColor?: string;
  pivotText?: string;
  showPivot?: boolean;
}

// Badge component
interface BadgeProps {
  content?: string | number;
  max?: number;
  dot?: boolean;
  color?: string;
  showZero?: boolean;
}

Display Components

Navigation Components

Navigation and routing components including tabs, navigation bars, pagination, and sidebar navigation.

import { NavBar, Tab, Tabs, Tabbar, TabbarItem, Pagination, IndexBar } from 'vant';

// NavBar component
interface NavBarProps {
  title?: string;
  leftText?: string;
  rightText?: string;
  leftArrow?: boolean;
  fixed?: boolean;
  placeholder?: boolean;
  zIndex?: number;
}

// Tab component
interface TabProps {
  title?: string;
  disabled?: boolean;
  dot?: boolean;
  badge?: string | number;
  name?: string | number;
}

Navigation Components

Feedback Components

Interactive feedback components including dialogs, action sheets, loading states, and toast notifications.

import { Dialog, Toast, ActionSheet, Loading, Notify, Overlay } from 'vant';

// Dialog API
interface DialogOptions {
  title?: string;
  message?: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
  showCancelButton?: boolean;
  overlay?: boolean;
  closeOnClickOverlay?: boolean;
}

// Toast API
interface ToastOptions {
  message: string;
  type?: 'text' | 'loading' | 'success' | 'fail' | 'html';
  position?: 'top' | 'middle' | 'bottom';
  duration?: number;
  forbidClick?: boolean;
}

Feedback Components

Business Components

Specialized components for e-commerce and business applications including address management, coupons, and product cards.

import { AddressEdit, AddressList, Card, Coupon, CouponList, SubmitBar } from 'vant';

// AddressEdit component
interface AddressEditProps {
  addressInfo?: AddressEditInfo;
  areaList?: Record<string, any>;
  showArea?: boolean;
  showPostal?: boolean;
  showSetDefault?: boolean;
}

// Card component
interface CardProps {
  thumb?: string;
  title?: string;
  desc?: string;
  price?: string | number;
  originPrice?: string | number;
  centered?: boolean;
}

Business Components

Utilities and Composables

Utility functions and Vue 3 composables for common functionality including DOM manipulation, touch handling, and state management.

import { useRect, useScrollParent, useEventListener, useToggle } from 'vant';

// Rect utility for element dimensions
function useRect(elementOrSelector: Element | Window | string): {
  width: number;
  height: number;
  top: number;
  left: number;
  right: number;
  bottom: number;
};

// Toggle state management
function useToggle(defaultValue?: boolean): [
  Ref<boolean>,
  (value?: boolean) => void
];

Utilities and Composables

Types

Common type definitions used throughout the Vant ecosystem.

// Theme variables interface
interface ConfigProviderTheme {
  primaryColor?: string;
  successColor?: string;
  dangerColor?: string;
  warningColor?: string;
  textColor?: string;
  activeColor?: string;
  backgroundColor?: string;
  borderColor?: string;
}

// Component size types
type ComponentSize = 'large' | 'normal' | 'small' | 'mini';

// Theme mode
type ThemeMode = 'light' | 'dark';

// Event handler types
type EventHandler<T = Event> = (event: T) => void;