{"id":10498,"library":"ant-design-vue","title":"Ant Design Vue UI Library","description":"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.","status":"active","version":"4.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/vueComponent/ant-design-vue","tags":["javascript","vue","vue3","ant","design","antd","vueComponent","component","components","typescript"],"install":[{"cmd":"npm install ant-design-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ant-design-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ant-design-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Ant Design Vue is a Vue.js component library and requires Vue 3.2.0 or higher as a peer dependency.","package":"vue","optional":false}],"imports":[{"note":"For modern Vue 3 setups, use named ESM imports. Direct CommonJS requires for individual components are not the recommended pattern for tree-shaking.","wrong":"const Button = require('ant-design-vue/lib/button');","symbol":"Button","correct":"import { Button } from 'ant-design-vue';"},{"note":"Commonly used for global configurations like theme, locale, and prefix. All core components are named exports from the main package entry point.","wrong":"import ConfigProvider from 'ant-design-vue/es/config-provider';","symbol":"ConfigProvider","correct":"import { ConfigProvider } from 'ant-design-vue';"},{"note":"The 'App' component provides global message, notification, and modal contexts. Importing everything with '*' can increase bundle size unnecessarily.","wrong":"import * as Antd from 'ant-design-vue';","symbol":"App","correct":"import { App } from 'ant-design-vue';"},{"note":"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.","wrong":"import Table from 'ant-design-vue/lib/table';","symbol":"Table","correct":"import { Table } from 'ant-design-vue';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { Button, ConfigProvider, Table, message } from 'ant-design-vue';\nimport 'ant-design-vue/dist/reset.css';\n\nconst App = {\n  setup() {\n    const columns = [\n      { title: 'Name', dataIndex: 'name', key: 'name' },\n      { title: 'Age', dataIndex: 'age', key: 'age' },\n      { title: 'Address', dataIndex: 'address', key: 'address' },\n    ];\n\n    const data = [\n      { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },\n      { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },\n      { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },\n    ];\n\n    const showMessage = () => {\n      message.info('Hello from Ant Design Vue!');\n    };\n\n    return {\n      columns,\n      data,\n      showMessage,\n    };\n  },\n  template: `\n    <ConfigProvider>\n      <div style=\"padding: 24px;\">\n        <h1>Ant Design Vue Quickstart</h1>\n        <Button type=\"primary\" @click=\"showMessage\">Show Message</Button>\n        <br/><br/>\n        <Table :columns=\"columns\" :data-source=\"data\" />\n      </div>\n    </ConfigProvider>\n  `,\n};\n\ncreateApp(App)\n  .use(Button)\n  .use(ConfigProvider)\n  .use(Table)\n  .mount('#app');\n\n// To run this, create an index.html with <div id=\"app\"></div> and include a script tag for this code.\n// Ensure you have Vue 3 and ant-design-vue installed in your project.\n// e.g., <script type=\"module\"> // Your quickstart code </script>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Ant 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"Ant 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"Default 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Global 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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);`.","cause":"Ant Design Vue components are not globally registered or imported into the current component.","error":"[Vue warn]: Failed to resolve component: a-button"},{"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`.","cause":"The global `message` API (and similar for `notification`, `Modal`) has not been properly provided through the `App` component or mounted to `app.config.globalProperties`.","error":"Error: `message` is not a function or is undefined"},{"fix":"Upgrade your Vue.js dependency to `^3.2.0` or higher, as Ant Design Vue v4.x requires Vue 3.","cause":"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).","error":"TypeError: Cannot read properties of undefined (reading 'setup') in your build output or console"}],"ecosystem":"npm"}