{"id":11584,"library":"pro-design-vue","title":"Pro Design Vue Component Library","description":"Pro Design Vue is an enterprise-class UI component library for Vue 3, built on top of Ant Design Vue. It provides a set of high-quality, ready-to-use Vue components primarily targeted at desktop applications. The library is currently at version 1.3.41 and maintains a frequent release cadence, primarily with patch versions, indicating active development and continuous improvements. Key differentiators include its robust foundation leveraging Ant Design Vue's established patterns, ensuring a consistent and performant user experience for complex enterprise interfaces. It fully supports modern browsers and Vue 3, shipping with TypeScript types for enhanced developer experience. Unlike standalone UI libraries, it extends the Ant Design Vue ecosystem with additional 'pro' components, focusing on common enterprise application scenarios.","status":"active","version":"1.3.41","language":"javascript","source_language":"en","source_url":"https://github.com/pro-design-vue/pro-design","tags":["javascript","pro design","pro design vue","component library","ui framework","ui","ant-design-vue","vue","typescript"],"install":[{"cmd":"npm install pro-design-vue","lang":"bash","label":"npm"},{"cmd":"yarn add pro-design-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add pro-design-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core UI component foundation; Pro Design Vue extends and builds upon it.","package":"ant-design-vue","optional":false},{"reason":"The core framework for building applications with Pro Design Vue.","package":"vue","optional":false}],"imports":[{"note":"Most components are named exports, not default exports. Ensure named import syntax is used.","wrong":"import ProLayout from 'pro-design-vue'","symbol":"ProLayout","correct":"import { ProLayout } from 'pro-design-vue'"},{"note":"Pro Design Vue is ESM-first and primarily consumed in modern Vue 3 setups, which are ESM. Avoid CommonJS `require`.","wrong":"const { ProTable } = require('pro-design-vue')","symbol":"ProTable","correct":"import { ProTable } from 'pro-design-vue'"},{"note":"For global component registration, import the default export and use `app.use()`.","wrong":"import { ProDesignVue } from 'pro-design-vue'; // Incorrect for global registration","symbol":"createApp","correct":"import { createApp } from 'vue'; import ProDesignVue from 'pro-design-vue'; const app = createApp(App); app.use(ProDesignVue);"}],"quickstart":{"code":"import { createApp, defineComponent } from 'vue';\nimport ProDesignVue from 'pro-design-vue';\nimport { ProLayout, ProTable, ProCard } from 'pro-design-vue';\nimport 'pro-design-vue/dist/pro-design-vue.css';\nimport 'ant-design-vue/dist/reset.css'; // Important for Ant Design Vue 4\n\nconst App = defineComponent({\n components: { ProLayout, ProTable, ProCard },\n setup() {\n const columns = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Age', dataIndex: 'age', key: 'age' }\n ];\n const data = [\n { key: '1', name: 'John Brown', age: 32 },\n { key: '2', name: 'Jim Green', age: 40 }\n ];\n return { columns, data };\n },\n template: `\n \n \n \n \n \n \n `\n});\n\nconst app = createApp(App);\napp.use(ProDesignVue);\napp.mount('#app');","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Vue 3 application using Pro Design Vue, globally registering the library and rendering a `ProLayout` with a `ProCard` containing a `ProTable`."},"warnings":[{"fix":"Ensure that your installed `ant-design-vue` version (`^4.2.0`) precisely matches the peer dependency requirements of your `pro-design-vue` version. Use `npm install` or `yarn install` to resolve peer dependencies correctly, or manually adjust `package.json` and reinstall.","message":"Pro Design Vue relies heavily on Ant Design Vue as a peer dependency. Mismatched versions between `pro-design-vue` and `ant-design-vue` can lead to styling issues, runtime errors, or unexpected component behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `import 'pro-design-vue/dist/pro-design-vue.css';` and `import 'ant-design-vue/dist/reset.css';` (for Ant Design Vue v4 and above) to your main application entry file (e.g., `main.ts` or `main.js`).","message":"Both `pro-design-vue` and its underlying `ant-design-vue` library require their respective CSS files to be imported for correct styling. Forgetting one or both will result in unstyled components.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Before upgrading `ant-design-vue`, always check the changelogs for both `ant-design-vue` and `pro-design-vue` for any specific migration guides or compatibility notes. It's recommended to upgrade peer dependencies together.","message":"As `pro-design-vue` builds upon Ant Design Vue, any breaking changes or significant updates in a new major version of `ant-design-vue` might implicitly affect `pro-design-vue` users.","severity":"gotcha","affected_versions":">=1.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 either globally register the entire library using `app.use(ProDesignVue)` or locally import and register specific components using `import { ProLayout } from 'pro-design-vue';` and add it to the `components` option in your Vue component.","cause":"The `ProLayout` component (or any other Pro Design Vue component) was not correctly imported or registered with the Vue application instance.","error":"Error: Failed to resolve component: ProLayout"},{"fix":"Verify that `app` is a valid Vue application created with `createApp(App)`, and that `ProDesignVue` is imported as the default export for global registration: `import ProDesignVue from 'pro-design-vue';`.","cause":"This typically happens if you try to use `app.use()` on something that isn't a Vue application instance, or if `ProDesignVue` itself wasn't imported correctly as a plugin.","error":"TypeError: Cannot read properties of undefined (reading 'use')"}],"ecosystem":"npm"}