Pro Design Vue Component Library

Common errors

• Error: Failed to resolve component: ProLayout

  cause 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')

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

Warnings

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

Install

• npm install pro-design-vue npm
• yarn add pro-design-vue yarn
• pnpm add pro-design-vue pnpm

Imports

• ProLayout
  wrong:

  import ProLayout from 'pro-design-vue'

  correct:

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

  Most components are named exports, not default exports. Ensure named import syntax is used.
• ProTable
  wrong:

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

  correct:

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

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

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

  correct:

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

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

Quickstart

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');