Ant Design Vue

When to use this skill

ALWAYS use this skill when the user mentions:

• "Ant Design Vue", "AntDV", "Ant Design of Vue"
• Building Vue 3 applications with Ant Design
• Using UI components like Button, Table, Form, Modal, Menu in a Vue context
• "Ant Design Vue 4.x", "AntDV 4"
• Requests to "implement a [component] with Ant Design Vue"
• Requests for Ant Design Vue API or configuration

How to use this skill

This skill is organized to match the Ant Design Vue official documentation structure.

1. Identify the User's Need

• Getting Started/Setup → examples/getting-started/installation.md or templates/project-setup.md
• Component Usage → See Component Categories below
• API Reference → api/components.md or api/config-provider.md
• Theme/i18n → examples/advanced/
• Templates → templates/component-template.md

2. Component Categories (One-to-One Mapping)

通用 (General)

• Contains: Button, Icon, Typography
• File: examples/components/general.md

布局 (Layout)

• Contains: Divider, Grid, Layout, Space
• File: examples/components/layout.md

导航 (Navigation)

• Contains: Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps
• File: examples/components/navigation.md

数据录入 (Data Entry)

• Contains: AutoComplete, Cascader, Checkbox, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
• File: examples/components/data-entry.md

数据展示 (Data Display)

• Contains: Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, QRCode, Segmented, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tour, Tree
• File: examples/components/data-display.md

反馈 (Feedback)

• Contains: Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin, Watermark
• File: examples/components/feedback.md

其他 (Other)

• Contains: Affix, App, BackTop, ConfigProvider, FloatButton
• File: examples/components/other.md

3. API & Advanced Topics

• Components API: api/components.md (Props, Events for common components)
• ConfigProvider API: api/config-provider.md (Global config, Theme)
• Theme Customization: examples/advanced/theme-customization.md (Design Token)
• Internationalization: examples/advanced/internationalization.md

4. Templates

• Component Templates: templates/component-template.md (Basic, Form, Modal patterns)
• Project Setup: templates/project-setup.md (Vite, Main.ts, App.vue setup)

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异 2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查 3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码 4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本 5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

Components API | 组件 API

API Reference

Ant Design Vue component APIs and props.

Common Props

Most components share common props:

• class: Additional CSS class
• style: Inline style object
• disabled: Disabled state
• loading: Loading state
• size: Component size (large, middle, small)

Button API

Props:

• type: Button type (primary, default, dashed, text, link)
• size: Button size (large, middle, small)
• shape: Button shape (default, round, circle)
• icon: Icon component slot
• loading: Loading state
• disabled: Disabled state
• onClick: Click handler

Form API

Props:

• model: Data object of form
• rules: Validation rules
• layout: Form layout (horizontal, vertical, inline)
• labelCol: Label layout
• wrapperCol: Input wrapper layout
• onFinish: Submit handler
• onFinishFailed: Failed submit handler

Form.Item Props:

• name: Field name
• label: Field label
• rules: Validation rules
• required: Required indicator
• hasFeedback: Display feed icon

Table API

Props:

• columns: Column definitions
• dataSource: Table data
• pagination: Pagination config
• rowSelection: Row selection config
• loading: Loading state
• onChange: Table change handler

Column Props:

• title: Column title
• dataIndex: Data field name
• key: Unique key
• sorter: Sort function
• customRender: Custom render function (slot name or function)

Input API

Props:

• value: Input value (v-model:value)
• placeholder: Placeholder text
• size: Input size
• prefix: Prefix element slot
• suffix: Suffix element slot
• allowClear: Allow clear content
• onChange: Change handler

Select API

Props:

• value: Selected value (v-model:value)
• options: Data of the select options
• mode: Selection mode (multiple, tags)
• showSearch: Enable search
• filterOption: Filter option logic
• onChange: Change handler

Modal API

Props:

• open: Modal visibility (v-model:open)
• title: Modal title
• onOk: OK button handler
• onCancel: Cancel button handler
• footer: Custom footer
• width: Modal width

Static Methods:

• Modal.info(), Modal.success(), Modal.error(), Modal.warning(), Modal.confirm()

Key Points

• Use v-model:value for most input components in V4 (changed from v-model in V2)
• Use v-model:open for Modal/Drawer visibility (changed from visible)
• Use v-model:checked for Checkbox/Switch
• Use v-model:fileList for Upload

ConfigProvider API | 全局配置 API

ConfigProvider

Provides a uniform configuration for all components.

Props

• locale: Language package setting
• theme: Theme configuration (V4 Design Token)
• componentSize: Config size for all components
• prefixCls: Set prefix class name
• getPopupContainer: To set the container of the popup element

Design Token (Theme)

Customize the theme via theme prop.

const theme = {
  token: {
    colorPrimary: '#00b96b',
    borderRadius: 2,
    fontSize: 14,
  },
  algorithm: theme.darkAlgorithm, // or defaultAlgorithm, compactAlgorithm
}

Usage

<template>
  <a-config-provider :theme="theme" :locale="locale">
    <App />
  </a-config-provider>
</template>

Internationalization | 国际化

Configuration

Ant Design Vue provides a React component ConfigProvider for global configuration of internationalization.

<template>
  <a-config-provider :locale="locale">
    <App />
  </a-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh-CN';
import enUS from 'ant-design-vue/es/locale/en_US';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const locale = ref(zhCN);

const switchLocale = () => {
  locale.value = locale.value.locale === 'en' ? zhCN : enUS;
  dayjs.locale(locale.value.locale === 'en' ? 'en' : 'zh-cn');
};
</script>

Supported Languages

Ant Design Vue supports many languages. Import from ant-design-vue/es/locale/.

Examples:

• zh_CN: Simplified Chinese
• zh_TW: Traditional Chinese
• en_US: English
• ja_JP: Japanese
• ko_KR: Korean

Theme Customization | 主题定制

Ant Design Vue V4 uses Design Tokens for theming.

Basic Usage

Pass theme prop to ConfigProvider.

<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
        fontSize: 16,
        borderRadius: 4,
      },
    }"
  >
    <a-button type="primary">Custom Button</a-button>
  </a-config-provider>
</template>

Dark Mode

Use algorithm to switch to dark mode.

<script setup lang="ts">
import { theme } from 'ant-design-vue';
</script>

<template>
  <a-config-provider
    :theme="{
      algorithm: theme.darkAlgorithm,
    }"
  >
    <App />
  </a-config-provider>
</template>

Compact Mode

<script setup lang="ts">
import { theme } from 'ant-design-vue';
</script>

<template>
  <a-config-provider
    :theme="{
      algorithm: theme.compactAlgorithm,
    }"
  >
    <App />
  </a-config-provider>
</template>

Design Tokens

Commonly used tokens:

• colorPrimary: Brand color
• colorSuccess: Success state color
• colorWarning: Warning state color
• colorError: Error state color
• colorInfo: Info state color
• colorTextBase: Base text color
• colorBgBase: Base background color
• fontFamily: Font family
• fontSize: Base font size
• borderRadius: Base border radius

Data Display Components (数据展示)

Table (表格)

A table displays rows of data.

<template>
  <a-table :dataSource="dataSource" :columns="columns" />
</template>
<script setup lang="ts">
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];
const dataSource = [
  { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
];
</script>

List (列表)

Simple List.

<a-list item-layout="horizontal" :data-source="data">
  <template #renderItem="{ item }">
    <a-list-item>
      <a-list-item-meta description="Ant Design, a design language">
        <template #title><a href="https://www.antdv.com/">{{ item.title }}</a></template>
        <template #avatar><a-avatar src="..." /></template>
      </a-list-item-meta>
    </a-list-item>
  </template>
</a-list>

Card (卡片)

Simple rectangular container.

<a-card title="Default size card" style="width: 300px">
  <template #extra><a href="#">more</a></template>
  <p>card content</p>
</a-card>

Image (图片)

Previewable image.

<a-image :width="200" src="https://aliyuncdn.antdv.com/logo.png" />

Avatar (头像)

Avatars can be used to represent people or objects.

<a-avatar size="large">User</a-avatar>
<a-avatar-group>
  <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
  <a-avatar style="background-color: #f56a00">K</a-avatar>
</a-avatar-group>

Badge (徽标数)

Badge normally appears in proximity to another object or user interface element.

<a-badge :count="5">
  <a-avatar shape="square" size="large" />
</a-badge>
<a-badge dot>
  <NotificationOutlined />
</a-badge>

Calendar (日历)

Container for displaying data in calendar form.

<a-calendar v-model:value="value" @panelChange="onPanelChange" />

Carousel (走马灯)

A carousel component for displaying multiple images or cards.

<a-carousel autoplay>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
</a-carousel>

Collapse (折叠面板)

A content area which can be collapsed and expanded.

<a-collapse v-model:activeKey="activeKey">
  <a-collapse-panel key="1" header="This is panel header 1">
    <p>{{ text }}</p>
  </a-collapse-panel>
</a-collapse>

Descriptions (描述列表)

Display multiple read-only fields in groups.

<a-descriptions title="User Info">
  <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
  <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
  <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
</a-descriptions>

Empty (空状态)

Empty state placeholder.

<a-empty />
<a-empty description="No Data" />

Popover (气泡卡片)

The floating card popped by clicking or hovering.

<a-popover title="Title">
  <template #content>
    <p>Content</p>
  </template>
  <a-button type="primary">Hover me</a-button>
</a-popover>

QRCode (二维码)

QRCode component.

<a-qrcode value="https://www.antdv.com" />

Segmented (分段控制器)

Segmented Controls.

<a-segmented v-model:value="value" :options="['Daily', 'Weekly', 'Monthly']" />

Statistic (统计数值)

Display statistic numbers.

<a-statistic title="Active Users" :value="112893" />
<a-statistic-countdown title="Countdown" :value="deadline" format="HH:mm:ss" />

Tabs (标签页)

Tabs make it easy to switch between different views.

<a-tabs v-model:activeKey="activeKey">
  <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
  <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
  <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>

Tag (标签)

Tag for categorizing or markup.

<a-tag color="success">success</a-tag>
<a-tag color="processing">processing</a-tag>
<a-tag color="error">error</a-tag>

Timeline (时间轴)

Vertical display timeline.

<a-timeline>
  <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
  <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
</a-timeline>

Tooltip (文字提示)

Simple text pop-up tip.

<a-tooltip title="prompt text">
  <span>Tooltip will show on mouse enter.</span>
</a-tooltip>

Tour (漫游式引导)

A guide to introduce the application's functions.

<a-tour :open="open" :steps="steps" @close="handleClose" />

Tree (树形控件)

A hierarchical list structure component.

<a-tree
  v-model:expandedKeys="expandedKeys"
  v-model:selectedKeys="selectedKeys"
  v-model:checkedKeys="checkedKeys"
  checkable
  :tree-data="treeData"
/>

Data Entry Components (数据录入)

Form (表单)

High performance Form component with data scope management.

<template>
  <a-form :model="formState" @finish="onFinish">
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const formState = reactive({ username: '' });
const onFinish = values => { console.log('Success:', values); };
</script>

Input (输入框)

A basic widget for getting the user input.

<a-input v-model:value="value" placeholder="Basic usage" />
<a-textarea v-model:value="value" :rows="4" />
<a-input-password v-model:value="value" />

Select (选择器)

Select component to select value from options.

<a-select
  v-model:value="value"
  style="width: 120px"
  :options="[{ value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }]"
/>

DatePicker (日期选择框)

To select or input a date.

<a-date-picker v-model:value="value" />
<a-range-picker v-model:value="value" />

AutoComplete (自动完成)

Input with auto-complete function.

<a-auto-complete
  v-model:value="value"
  :options="options"
  placeholder="input here"
  @search="handleSearch"
/>

Cascader (级联选择)

Cascade selection box.

<a-cascader v-model:value="value" :options="options" placeholder="Please select" />

Checkbox (多选框)

Checkbox.

<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
<a-checkbox-group v-model:value="value" :options="plainOptions" />

InputNumber (数字输入框)

Enter a number within certain range.

<a-input-number v-model:value="value" :min="1" :max="10" />

Mentions (提及)

Mention component.

<a-mentions v-model:value="value" :options="options" prefix="#" />

Radio (单选框)

Radio.

<a-radio-group v-model:value="value">
  <a-radio value="a">Hangzhou</a-radio>
  <a-radio value="b">Shanghai</a-radio>
</a-radio-group>

Rate (评分)

Rate component.

<a-rate v-model:value="value" />

Slider (滑动输入条)

A Slider component for displaying current value and intervals in range.

<a-slider v-model:value="value" />
<a-slider v-model:value="rangeValue" range />

Switch (开关)

Switching Selector.

<a-switch v-model:checked="checked" />

TimePicker (时间选择框)

To select or input a time.

<a-time-picker v-model:value="value" />

Transfer (穿梭框)

Double column transfer choice box.

<a-transfer
  v-model:targetKeys="targetKeys"
  :dataSource="dataSource"
  :render="item => item.title"
/>

TreeSelect (树选择)

Tree selection control.

<a-tree-select
  v-model:value="value"
  show-search
  style="width: 100%"
  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  placeholder="Please select"
  allow-clear
  tree-default-expand-all
  :tree-data="treeData"
/>

Upload (上传)

Upload file control.

<a-upload
  v-model:file-list="fileList"
  name="file"
  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  @change="handleChange"
>
  <a-button>
    <upload-outlined />
    Click to Upload
  </a-button>
</a-upload>

Feedback Components (反馈)

Modal (对话框)

Modal dialogs.

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
const showModal = () => { open.value = true; };
const handleOk = e => { open.value = false; };
</script>

Message (全局提示)

Display global messages as feedback in response to user operations.

<script setup lang="ts">
import { message } from 'ant-design-vue';
const info = () => {
  message.info('This is a normal message');
};
</script>

Notification (通知提醒框)

Display a notification message globally.

<script setup lang="ts">
import { notification } from 'ant-design-vue';
const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification.',
  });
};
</script>

Spin (加载中)

A spinner for displaying loading state of a page or a section.

<a-spin />
<a-spin size="large" />

Alert (警告提示)

Alert component for feedback.

<a-alert message="Success Text" type="success" />
<a-alert message="Info Text" type="info" />
<a-alert message="Warning Text" type="warning" />
<a-alert message="Error Text" type="error" />

Drawer (抽屉)

A panel which slides in from the edge of the screen.

<a-drawer
  v-model:open="open"
  class="custom-class"
  root-class-name="root-class-name"
  :root-style="{ color: 'blue' }"
  style="color: red"
  title="Basic Drawer"
  placement="right"
  @after-open-change="afterOpenChange"
>
  <p>Some contents...</p>
</a-drawer>

Popconfirm (气泡确认框)

A simple and compact confirmation dialog of an action.

<a-popconfirm
  title="Are you sure delete this task?"
  ok-text="Yes"
  cancel-text="No"
  @confirm="confirm"
  @cancel="cancel"
>
  <a href="#">Delete</a>
</a-popconfirm>

Progress (进度条)

Display the current progress of an operation flow.

<a-progress :percent="30" />
<a-progress type="circle" :percent="75" />

Result (结果)

Used to feed back the results of a series of operational tasks.

<a-result
  status="success"
  title="Successfully Purchased Cloud Server ECS!"
  sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
>
  <template #extra>
    <a-button key="console" type="primary">Go Console</a-button>
    <a-button key="buy">Buy Again</a-button>
  </template>
</a-result>

Skeleton (骨架屏)

Provide a placeholder while waiting for content to load.

<a-skeleton active />
<a-skeleton avatar :paragraph="{ rows: 4 }" />

Watermark (水印)

Add specific text or patterns to the page.

<a-watermark content="Ant Design Vue">
  <div style="height: 500px" />
</a-watermark>

General Components (通用)

Button (按钮)

To trigger an operation.

<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="text">Text</a-button>
<a-button type="link">Link</a-button>

Icon (图标)

Semantic vector graphics. Note: Icons are strictly separated from 4.0.

npm install @ant-design/icons-vue

<template>
  <step-forward-outlined />
</template>
<script setup>
import { StepForwardOutlined } from '@ant-design/icons-vue';
</script>

Typography (排版)

Basic text writing, including headings, body text, lists, and more.

<a-typography-title>Introduction</a-typography-title>
<a-typography-paragraph>
  In the process of internal desktop applications development...
</a-typography-paragraph>

Layout Components (布局)

Divider (分割线)

A divider line separates different content.

<a-divider />
<a-divider>With Text</a-divider>
<a-divider type="vertical" />

Grid (栅格)

24 Grids System.

<a-row>
  <a-col :span="12">col-12</a-col>
  <a-col :span="12">col-12</a-col>
</a-row>
<a-row :gutter="16">
  <a-col :span="8">col-8</a-col>
  <a-col :span="8">col-8</a-col>
  <a-col :span="8">col-8</a-col>
</a-row>

Layout (布局)

Handling the overall layout of a page.

<a-layout>
  <a-layout-header>Header</a-layout-header>
  <a-layout-content>Content</a-layout-content>
  <a-layout-footer>Footer</a-layout-footer>
</a-layout>

Space (间距)

Set components spacing.

<a-space>
  <a-button>Button</a-button>
  <a-button>Button</a-button>
</a-space>

Navigation Components (导航)

Anchor (锚点)

Hyperlinks to scroll on one page.

<template>
  <a-anchor :items="items" />
</template>
<script setup lang="ts">
const items = [
  {
    key: 'part-1',
    href: '#part-1',
    title: 'Part 1',
  },
  {
    key: 'part-2',
    href: '#part-2',
    title: 'Part 2',
  },
];
</script>

Breadcrumb (面包屑)

Indicates the current page's location within a navigational hierarchy.

<a-breadcrumb>
  <a-breadcrumb-item>Home</a-breadcrumb-item>
  <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
  <a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>

Dropdown (下拉菜单)

A dropdown list.

<a-dropdown>
  <a class="ant-dropdown-link" @click.prevent>
    Hover me <DownOutlined />
  </a>
  <template #overlay>
    <a-menu>
      <a-menu-item>
        <a href="javascript:;">1st menu item</a>
      </a-menu-item>
    </a-menu>
  </template>
</a-dropdown>

Menu (导航菜单)

Navigation menu.

<template>
  <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
</template>
<script setup lang="ts">
import { ref, h } from 'vue';
import { MailOutlined } from '@ant-design/icons-vue';
const current = ref(['mail']);
const items = ref([
  {
    key: 'mail',
    icon: () => h(MailOutlined),
    label: 'Navigation One',
    title: 'Navigation One',
  },
]);
</script>

Pagination (分页)

A long list can be divided into several pages.

<a-pagination v-model:current="current" :total="50" show-less-items />

Steps (步骤条)

Navigation bar that guides the user through the steps of a task.

<a-steps :current="1">
  <a-step title="Finished" description="This is a description." />
  <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
  <a-step title="Waiting" description="This is a description." />
</a-steps>

Other Components (其他)

ConfigProvider (全局化配置)

Global configuration context, such as internationalization.

<a-config-provider :locale="locale">
  <App />
</a-config-provider>

Affix (固钉)

Wrap Affix around another component to make it stick the viewport.

<a-affix :offset-top="top">
  <a-button type="primary" @click="top += 10">Affix top</a-button>
</a-affix>

App (包裹组件)

Wrap components to provide global context (message/modal/notification). Recommended in v4 to replace global static methods.

<template>
  <a-app>
    <MyPage />
  </a-app>
</template>

<!-- In child component -->
<script setup lang="ts">
import { App } from 'ant-design-vue';
const { message, modal, notification } = App.useApp();
const showMessage = () => {
  message.success('Success!');
};
</script>

FloatButton (悬浮按钮)

Floating button, usually for global operations.

<a-float-button onClick={() => console.log('click')} />
<a-float-button-group trigger="hover" type="primary" :style="{ right: '24px' }">
  <template #icon><CustomerServiceOutlined /></template>
  <a-float-button />
  <a-float-button>
    <template #icon><CommentOutlined /></template>
  </a-float-button>
</a-float-button-group>

BackTop (回到顶部)

Makes it easy to go back to the top of the page.

<a-back-top />
<!-- Or using FloatButton.BackTop in v4 -->
<a-float-button-back-top />

Installation

Using npm or yarn

We recommend using npm or yarn for development.

$ npm install ant-design-vue@4.x --save
# or
$ yarn add ant-design-vue@4.x

Import

Global Import

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

On-demand Import (Recommended)

Use unplugin-vue-components for auto-importing components.

npm install unplugin-vue-components -D

vite.config.ts:

import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
});

Basic Usage

Button Example

<template>
  <a-button type="primary">Primary Button</a-button>
</template>
<script setup lang="ts">
// Components are auto-imported if unplugin-vue-components is configured
// Otherwise: import { Button as AButton } from 'ant-design-vue';
</script>

Internationalization

<template>
  <a-config-provider :locale="locale">
    <App />
  </a-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh-CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
const locale = ref(zhCN);
</script>

Component Template | 组件模板

Basic Component Usage

<template>
  <a-component-name
    v-model:value="value"
    prop1="value1"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
const handleChange = (val) => {
  console.log(val);
};
</script>

Component in Form

<template>
  <a-form :model="formState" @finish="onFinish">
    <a-form-item
      name="field"
      label="Label"
      :rules="[{ required: true, message: 'Please input!' }]"
    >
      <a-component-name v-model:value="formState.field" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

interface FormState {
  field: string;
}

const formState = reactive<FormState>({
  field: '',
});

const onFinish = (values: FormState) => {
  console.log('Success:', values);
};
</script>

Modal/Drawer Template

<template>
  <div>
    <a-button type="primary" @click="showModal">Open</a-button>
    <a-modal
      v-model:open="open"
      title="Title"
      @ok="handleOk"
    >
      <p>Content...</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};
</script>

Project Setup Template | 项目配置模板

Vite Setup with Auto Import

vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
});

Main Entry (main.ts)

import { createApp } from 'vue';
import App from './App.vue';
import 'ant-design-vue/dist/reset.css'; // Important for V4

const app = createApp(App);
app.mount('#app');

Global Config Layout (App.vue)

<template>
  <a-config-provider :locale="locale" :theme="theme">
    <a-app>
      <router-view />
    </a-app>
  </a-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh-CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { theme as antdTheme } from 'ant-design-vue';

dayjs.locale('zh-cn');

const locale = ref(zhCN);
const theme = {
  algorithm: antdTheme.defaultAlgorithm,
  token: {
    colorPrimary: '#1890ff',
  },
};
</script>