{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install pro-design-vue"],"cli":null},"imports":["import { ProLayout } from 'pro-design-vue'","import { ProTable } from 'pro-design-vue'","import { createApp } from 'vue'; import ProDesignVue from 'pro-design-vue'; const app = createApp(App); app.use(ProDesignVue);"],"auth":{"required":false,"env_vars":[]},"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    <ProLayout>\n      <template #headerContent>\n        <h1>My Pro App</h1>\n      </template>\n      <ProCard title=\"Data Table\">\n        <ProTable :columns=\"columns\" :data-source=\"data\"></ProTable>\n      </ProCard>\n    </ProLayout>\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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}