Registry / web-framework / arco-design-pro-vue

arco-design-pro-vue

library2.7.3jsnpmunverified

Arco Design Pro for Vue is an opinionated, out-of-the-box frontend solution for building mid/back-office management systems, built upon the Arco Design Vue component library. It targets modern web development with Vue 3, Pinia for state management, and full TypeScript support. The project provides over 16 page templates covering common scenarios like tables, lists, forms, and dashboards, alongside features such as extensive theming options (including dark mode), built-in internationalization, and a robust mock API solution for development. The current stable version is 2.7.3. As a "Pro" template, it typically sees regular updates and maintenance to keep pace with its underlying dependencies and introduce new features. Its key differentiators include its deep integration with the Arco Design ecosystem, a comprehensive set of pre-built templates, and a focus on enterprise-grade features and developer experience.

web-framework

npm install arco-design-pro-vue

package ↗homepage ↗

INSTALL

IMPORT

SIG · ARCO-DESIGN-PRO-VU

arco-design-pro-vue

web-frameworkjavascriptv2.7.3

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.

arco-cli

✓ npm i arco-cli@latest yarn -g

✗ npm i arco-design-pro-vue -g

This package (`arco-design-pro-vue`) is a project template and is not imported directly into an application. Its primary usage pattern involves globally installing `arco-cli` to scaffold a new project based on this template.

App.vue (root component)

✓ import App from './App.vue'

✗ import { App } from 'arco-design-pro-vue'

After scaffolding a project with `arco-cli`, the generated project structure will typically include a root `App.vue` component. This import is a common pattern within the *generated project* for defining the main application entry, not an import from the `arco-design-pro-vue` package itself.

Message (from Arco Design Vue)

✓ import { Message } from '@arco-design/web-vue'

✗ import { Message } from 'arco-design-pro-vue'

The generated Arco Design Pro project heavily utilizes components from `@arco-design/web-vue`. This is an example of a common import *within the scaffolded application* for a core UI component, demonstrating how such components are used after project initialization.

Demonstrates the typical workflow to initialize a new Arco Design Pro Vue project, install its dependencies, and start the development server.

npm i arco-cli@latest yarn -g arco init my-arco-pro-project cd my-arco-pro-project yarn install yarn dev

Debug

Known issues

breakingMajor architectural shift from Vue 2 to Vue 3 with the release of v2.0.0. Projects initialized with older versions cannot be directly upgraded to v2.0.0 or newer without significant refactoring.

fix

For existing Vue 2 projects, it is recommended to start a new project with `arco init` and migrate components manually, rather than attempting an in-place upgrade.

affects: <2.0.0

breakingUpdates to underlying build tools like Vite (e.g., from v2 to v3 in Arco Design Pro Vue v2.2.0, and v3 to v4 in v2.6.0) can introduce breaking changes to `vite.config.ts` or plugin configurations.

fix

Always review the changelog for `arco-design-pro-vue` and the official Vite migration guides when upgrading to ensure compatibility with your project's build setup. Test thoroughly after upgrades.

affects: >=2.2.0

gotchaEnsuring `arco-cli` is globally installed is crucial for scaffolding. Without it, the `arco init` command will not be found.

fix

Run `npm i arco-cli@latest yarn -g` to ensure the command-line interface tool is available in your system's PATH.

affects: All

gotchaManual component style imports are sometimes required when using on-demand loading, particularly for programmatic components like `Message` or `Notification`.

fix

For components not parsed by auto-import plugins, ensure you manually import their CSS: `import '@arco-design/web-vue/es/message/style/css.js'`.

affects: >=2.11.0 of @arco-design/web-vue (used by template)

gotchaNode.js version compatibility can be an issue. Newer versions of Arco Design Pro might require specific Node.js environments.

fix

Check the `engines` field in the generated project's `package.json` or the official Arco Design Pro documentation for recommended Node.js versions. Tools like `nvm` or `mise` can help manage Node.js versions.

affects: All

Errors

Common errors & fixes

command not found: arco

`arco-cli` is not installed globally or not in system PATH.

fix

Run `npm i arco-cli@latest yarn -g` to install the Arco CLI globally.

Error: Cannot find module '@arco-design/web-vue'

Dependencies for the scaffolded project were not installed or installation failed.

fix

Navigate into your project directory (`cd my-arco-pro-project`) and run `yarn install` or `npm install`.

Port 3000 (or other) is already in use.

Another process is occupying the default development server port.

fix

Either stop the process using the port or configure your `vite.config.ts` to use a different port (e.g., `server: { port: 3001 }`).

Upgrade

Version history

2.7.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

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

homepagehttps://arco.design/vue/docs/pro/ ↗