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

github ↗package ↗homepage ↗

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.

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

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

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

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

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

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

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.

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

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 footguns

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.

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.

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.

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.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

49 hits · last 30 days

bytedance

gptbot

ahrefsbot

script

Resources

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

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

homepagehttps://antdv.com ↗