Registry / web-framework / ant-design-vue

ant-design-vue

library4.2.6jsnpmunverified

Ant Design Vue is an enterprise-class UI component library based on the Ant Design specification, specifically implemented for Vue.js applications. It provides a comprehensive set of high-quality, out-of-the-box components tailored for desktop application development. The library is currently stable at version 4.2.6, with frequent patch releases addressing bug fixes and minor improvements, and larger minor versions introducing new features and optimizations every few months. Its key differentiators include adherence to the well-established Ant Design system, robust TypeScript support (shipping its own types), and strong compatibility with modern Vue 3 ecosystems, including SSR and Electron environments. It offers a structured and opinionated approach to UI development, promoting consistency and reusability.

web-framework

npm install ant-design-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ANT-DESIGN-VUE

ant-design-vue

web-frameworkjavascriptv4.2.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Button

✓ import { Button } from 'ant-design-vue';

✗ const Button = require('ant-design-vue/lib/button');

For modern Vue 3 setups, use named ESM imports. Direct CommonJS requires for individual components are not the recommended pattern for tree-shaking.

ConfigProvider

✓ import { ConfigProvider } from 'ant-design-vue';

✗ import ConfigProvider from 'ant-design-vue/es/config-provider';

Commonly used for global configurations like theme, locale, and prefix. All core components are named exports from the main package entry point.

App

✓ import { App } from 'ant-design-vue';

✗ import * as Antd from 'ant-design-vue';

The 'App' component provides global message, notification, and modal contexts. Importing everything with '*' can increase bundle size unnecessarily.

Table

✓ import { Table } from 'ant-design-vue';

✗ import Table from 'ant-design-vue/lib/table';

Starting with v4, Ant Design Vue strongly promotes direct named imports for better tree-shaking and consistency. Legacy direct path imports might still work but are discouraged.

This quickstart demonstrates how to set up Ant Design Vue in a Vue 3 application, import components like Button, ConfigProvider, and Table, and use the global message service, along with importing the necessary CSS.

import { createApp } from 'vue'; import { Button, ConfigProvider, Table, message } from 'ant-design-vue'; import 'ant-design-vue/dist/reset.css'; const App = { setup() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, ]; const showMessage = () => { message.info('Hello from Ant Design Vue!'); }; return { columns, data, showMessage, }; }, template: ` <ConfigProvider> <div style="padding: 24px;"> <h1>Ant Design Vue Quickstart</h1> <Button type="primary" @click="showMessage">Show Message</Button> <br/><br/> <Table :columns="columns" :data-source="data" /> </div> </ConfigProvider> `, }; createApp(App) .use(Button) .use(ConfigProvider) .use(Table) .mount('#app'); // To run this, create an index.html with <div id="app"></div> and include a script tag for this code. // Ensure you have Vue 3 and ant-design-vue installed in your project. // e.g., <script type="module"> // Your quickstart code </script>

Debug

Known issues

breakingAnt Design Vue v4.x introduced significant breaking changes from v3.x, especially regarding styling, theme customization, and component APIs. Direct migration without consulting the official migration guide will lead to errors.

fix

Refer to the official Ant Design Vue 4.0 migration guide. Major changes include migrating from Less to CSS-in-JS for styling, updated theme configuration via `ConfigProvider`, and potential API changes for individual components. Ensure your build setup supports CSS-in-JS if customizing themes.

affects: >=4.0.0

breakingAnt Design Vue v3.x and earlier versions supported Vue 2.x and Vue 3.x with separate packages or branches. Version 4.x is exclusively for Vue 3.x, requiring a Vue 3.2.0+ peer dependency.

fix

Ensure your project is running Vue 3.2.0 or newer. If you are on Vue 2, you must use Ant Design Vue v1.x, or migrate your entire application to Vue 3 before upgrading to Ant Design Vue v4.

affects: >=4.0.0

gotchaDefault styling might not load if the `ant-design-vue/dist/reset.css` or `ant-design-vue/dist/antd.min.css` (for older versions) is not explicitly imported into your project. Components will appear unstyled.

fix

Add `import 'ant-design-vue/dist/reset.css';` to your main entry file (e.g., `main.ts` or `main.js`). If you use custom themes or a build system that handles CSS import, ensure the theme variables are correctly overridden and compiled.

affects: >=1.0.0

gotchaGlobal utility functions like `message`, `notification`, and `Modal.confirm` are often used without being properly provided by the `App` component or globally imported, leading to errors or inconsistent styling.

fix

Wrap your root Vue component with `<a-config-provider>` and `<a-app>`: `<a-config-provider><a-app>...</a-app></a-config-provider>`. This provides the necessary context for these global methods. Alternatively, import `message` or `notification` directly and use `app.config.globalProperties.$message = message;` for global access.

affects: >=2.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: a-button

Ant Design Vue components are not globally registered or imported into the current component.

fix

Ensure you `import { Button } from 'ant-design-vue';` and register it locally in your component's `components` option, or globally via `app.use(Button);`.

Error: `message` is not a function or is undefined

The global `message` API (and similar for `notification`, `Modal`) has not been properly provided through the `App` component or mounted to `app.config.globalProperties`.

fix

Wrap your root application with `<a-app>` component from Ant Design Vue. Alternatively, if using `ConfigProvider` directly without `App`, manually provide it: `app.config.globalProperties.$message = message;` after importing `message`.

TypeError: Cannot read properties of undefined (reading 'setup') in your build output or console

Often occurs when using Ant Design Vue with a version of Vue.js older than required (e.g., Vue 2.x with Ant Design Vue v4.x).

fix

Upgrade your Vue.js dependency to `^3.2.0` or higher, as Ant Design Vue v4.x requires Vue 3.

Upgrade

Version history

4.2.6latest on npm

Audit

Dependencies

vuerequiredAnt Design Vue is a Vue.js component library and requires Vue 3.2.0 or higher as a peer dependency.

Agent activity

148 hits · last 30 days

node

145

OpenAI (training)

Resources

githubhttps://github.com/vueComponent/ant-design-vue ↗

packagehttps://www.npmjs.com/package/ant-design-vue ↗

homepagehttps://antdv.com ↗