Registry / web-framework / pro-design-vue

pro-design-vue

library1.3.41jsnpmunverified

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.

web-framework

npm install pro-design-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PRO-DESIGN-VUE

pro-design-vue

web-frameworkjavascriptv1.3.41

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.

ProLayout

✓ import { ProLayout } from 'pro-design-vue'

✗ import ProLayout from 'pro-design-vue'

Most components are named exports, not default exports. Ensure named import syntax is used.

ProTable

✓ import { ProTable } from 'pro-design-vue'

✗ const { ProTable } = require('pro-design-vue')

Pro Design Vue is ESM-first and primarily consumed in modern Vue 3 setups, which are ESM. Avoid CommonJS `require`.

createApp

✓ import { createApp } from 'vue'; import ProDesignVue from 'pro-design-vue'; const app = createApp(App); app.use(ProDesignVue);

✗ import { ProDesignVue } from 'pro-design-vue'; // Incorrect for global registration

For global component registration, import the default export and use `app.use()`.

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`.

import { createApp, defineComponent } from 'vue'; import ProDesignVue from 'pro-design-vue'; import { ProLayout, ProTable, ProCard } from 'pro-design-vue'; import 'pro-design-vue/dist/pro-design-vue.css'; import 'ant-design-vue/dist/reset.css'; // Important for Ant Design Vue 4 const App = defineComponent({ components: { ProLayout, ProTable, ProCard }, setup() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' } ]; const data = [ { key: '1', name: 'John Brown', age: 32 }, { key: '2', name: 'Jim Green', age: 40 } ]; return { columns, data }; }, template: ` <ProLayout> <template #headerContent> <h1>My Pro App</h1> </template> <ProCard title="Data Table"> <ProTable :columns="columns" :data-source="data"></ProTable> </ProCard> </ProLayout> ` }); const app = createApp(App); app.use(ProDesignVue); app.mount('#app');

Debug

Known issues

gotchaPro 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.

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.

affects: >=1.0.0

gotchaBoth `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.

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`).

affects: >=1.0.0

gotchaAs `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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Failed to resolve component: ProLayout

The `ProLayout` component (or any other Pro Design Vue component) was not correctly imported or registered with the Vue application instance.

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.

TypeError: Cannot read properties of undefined (reading 'use')

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.

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';`.

Upgrade

Version history

1.3.41latest on npm

Audit

Dependencies

ant-design-vuerequiredCore UI component foundation; Pro Design Vue extends and builds upon it.

vuerequiredThe core framework for building applications with Pro Design Vue.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/pro-design-vue/pro-design ↗

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

homepagehttps://pro-vue.antdv.com ↗