# yudao-ui-admin-vue3: the Vue 3 admin front end for the Yudao platform

> Yudao UI Admin Vue3 is the Element Plus front end of the Yudao rapid development platform, covering RBAC permissions, multi-tenant SaaS, Flowable workflows and a long list of business modules. It is a front end only: it needs a separate Spring Boot or Spring Cloud backend, and pnpm is mandatory.

**yudaocode/yudao-ui-admin-vue3** — 芋道管理后台，基于 Vue3 + Element Plus 实现，支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城、CRM、ERP、MES、IM、AI 大模型、IoT 物联网等功能。

- Repository: https://github.com/yudaocode/yudao-ui-admin-vue3
- Stars: 3,869 · Forks: 1,654
- Language: Vue
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/yudaocode-yudao-ui-admin-vue3

## What yudao-ui-admin-vue3 is and who it is for

This repository is the web front end of Yudao, described in its README as a developer-centred rapid development platform that is fully open source and free for individuals and companies. The README states plainly that there will be no commercial edition. The code you get here is the admin console: users, roles, menus, departments, tenants, dictionaries, logs, workflow, payments and a long list of business modules such as Mall, CRM, ERP, MES, HRM and FMS.

It is written in Vue 3 with Element Plus, TypeScript, Vite, pinia, vue-i18n and UnoCSS, and it is derived from the vue-element-plus-admin template with SaaS and auto-import features added. That lineage matters: if you have worked with Element Plus admin templates before, the layout of src, the permission store and the layout components will look familiar.

The intended audience is a team that has already chosen the Yudao backend. The README points at two backends, a Spring Boot monolith documented at doc.iocoder.cn and a Spring Cloud microservice architecture at cloud.iocoder.cn. This repository does not contain either of them. Anyone evaluating this project as a standalone dashboard starter will be disappointed, because most screens call APIs that only exist on the Yudao server side. The README also links two other front ends for the same platform, a Vue 3 plus vben5 (ant-design-vue) variant and a Vue 2 plus element-ui variant, so this is one of three official interfaces rather than the only option.

## How the front end is put together

The stack table in the README pins Vue 3.3.8, Vite 4.5.0, Element Plus 2.4.2, TypeScript 5.2.2, pinia 2.1.7, vue-i18n 9.6.5, vue-router 4.2.5, UnoCSS 0.57.4, iconify 3.1.1 and wangEditor 5.1.23. Those are the versions the project documents, not necessarily what a fresh install resolves.

Permission handling is described as a dynamic route generation scheme. The README lists role management as menu permission assignment plus data-scope rules by organisation, and menu management as the place where menu, operation and button permission identifiers are configured, with a local cache for performance. In practice this means the router is not a static file you edit by hand; routes are produced from what the backend returns for the signed-in user, and buttons are gated by permission identifiers. That design is what makes the tenant and role screens possible, and it is also the first thing that breaks when the backend returns an unexpected menu tree.

State lives in pinia, internationalisation in vue-i18n, and styling in UnoCSS atomic classes alongside Element Plus components. The repository root carries a full set of environment files, .env, .env.dev, .env.local, .env.prod, .env.stage and .env.test, and the build scripts map onto them one to one, so the API base URL and similar settings differ per mode rather than being hardcoded. The README recommends VS Code with Vue - Official, UnoCSS, Iconify IntelliSense, i18n Ally, Stylelint, Prettier, ESLint and DotENV extensions, which is a reasonable signal that the project expects contributors to run lint and format locally rather than only in CI.

## Installing yudao-ui-admin-vue3 and starting it locally

The README sets two hard prerequisites: Node.js above 16.18.0 and pnpm above 8.6.0, with pnpm described as mandatory. The package.json confirms this, since every script is written against pnpm. There is no npm or yarn path documented.

Installing dependencies is a single command. The package.json even exposes a short alias for it, so both forms below do the same thing.

```bash
pnpm install
```

Starting the development server uses the env.local mode, which is the script the README's quick-start flow points at. The dev-server script exists as well and runs against the dev mode instead.

```bash
pnpm dev
```

After the server starts, Vite prints a local URL in the terminal, and that is where the admin console loads. The README's demo address for this stack is http://dashboard-vue3.yudao.iocoder.cn if you want to see the target state before wiring your own backend.

Production builds are split by environment rather than being one command with flags. The relevant scripts are build:prod, build:stage, build:test, build:dev and build:local, each passing a matching --mode value to Vite, and each running Node with a raised old-space limit of 8192 MB. That memory flag is worth noticing: the project's own build script assumes a build machine with room to spare, and a small CI container may need that number revisited.

```bash
pnpm build:prod
```

Once a build exists, serve:prod runs vite preview against the prod mode. Linting is a three-part check, eslint for scripts, stylelint for CSS and prettier for formatting, exposed as pnpm lint, with fix variants for each. Type checking is separate again through pnpm ts:check, which also runs vue-tsc with the raised memory limit and an incremental build info file under node_modules/.cache.

## The backend is not optional, and the docs are Chinese-first

The most important limitation is structural. This repository is a user interface. Every meaningful screen, from tenant packages to the Flowable workflow designer, depends on endpoints served by the Yudao backend, either the Spring Boot monolith or the Spring Cloud deployment. If you clone this repository alone and run pnpm dev, you get a shell that cannot authenticate, because there is no local mock server documented in the README. Teams that want a front-end-only prototype should look elsewhere or expect to write their own mocks.

The second constraint is language. The README, the quick-start documentation, the video tutorials and the demo environment are all in Chinese, and the business modules are built around Chinese conventions. The workflow section explicitly mentions support for domestic Chinese databases and for DingTalk and Feishu style approval design, with two designers, a simple drag-and-drop one and a BPMN one. That is a genuine strength if your organisation works that way and a mismatch if it does not.

The third is scope. The README lists system features, workflow, payments, SMS, mail, in-site messages, Mall, OA, ERP, WMS, CRM, CMS, MES, HRM, FMS, PMS, an AI model platform, IoT and IM. A codebase that carries that many modules is large, and the release notes show it growing: v2026.08 added HRM and FMS with a standalone mobile client, v2026.07 completed mobile adaptation across the admin console, and v2026.06 added IM and Spring Boot 4.X support. Each release widens the surface you inherit. If you only need user management and a couple of forms, you are taking on far more than you asked for, and pruning it is work the README does not describe.

## How it differs from RuoYi-Vue3 and plain Element Plus templates

The closest alternatives are the RuoYi-Vue3 line and the vue-element-plus-admin template this project was built from. The difference is not the component library, since all three sit on Element Plus or element-ui. It is what comes attached.

RuoYi-Vue3 is a general-purpose admin scaffold. You get users, roles, menus and a code generator, and you supply the domain logic. Yudao UI Admin Vue3 assumes a specific backend with a specific feature set: tenant management and tenant packages for SaaS, application management for SSO with multiple OAuth2 grant types, SMS channels wired to Alibaba Cloud and Tencent Cloud, error-code management that can be edited online without restarting the service, and a Flowable-based workflow with countersign, or-sign, sequential approval, transfer, delegation, add-sign, reduce-sign, withdrawal, termination, form-level permissions per node, timeout approval, automatic reminders and parent-child processes. That list comes straight from the README's workflow table.

So the choice is between a scaffold you extend and a platform you adopt. RuoYi-Vue3 gives you less to remove and less to learn; Yudao gives you working implementations of multi-tenancy and approval flows that would take months to build. The cost is that you inherit Yudao's data model, its API contracts and its release cadence. The repository was last pushed on 2026-09-14, so the project is moving, and moving platforms are harder to fork than quiet scaffolds. Note also that the related searches people run around this project include the Vue 2 variant and the vben5 variant; picking the wrong front end for your team's component library of choice is a real and avoidable mistake.

## Licence, upgrades and what maintenance costs you

The repository is MIT licensed, and the README states that all code is open source and free for individuals and enterprises, with no commercial edition planned. MIT is permissive: you can use, modify and redistribute the code, including commercially. That is a statement about the licence file, not legal advice, and if you redistribute the project you should read the LICENSE file in the repository root and keep the copyright notice intact.

The upgrade cost is the part worth weighing. The backend and front end are separate repositories with separate release notes, and the front end's version string in package.json is tied to a release train, 2026.08-snapshot at the time of writing, matching the v2026.08 release. That means a front-end upgrade usually implies a matching backend upgrade, and vice versa, because the API contracts move together. The release notes for v2026.08, v2026.07 and v2026.06 each add whole modules, so an upgrade is not a patch you apply casually.

On the front end specifically, the pinned dependency versions in the README suggest the project does not chase every upstream release. Vite 4 and Vue 3.3 are documented even though newer major versions exist. That is a trade-off in both directions: fewer breaking changes to absorb, but you may need to upgrade Vite or Element Plus yourself for a fix, and doing so puts you off the path the maintainers test. The 8192 MB memory flag in every build script is another maintenance detail, since it assumes a build environment that can allocate that much.

## Conclusion

Adopt yudao-ui-admin-vue3 if you are already running the Yudao backend and want its system, workflow or business modules behind an Element Plus interface, and you accept the pnpm and Node version constraints and the Chinese-first documentation. Do not adopt it as a standalone UI kit or if you need an English-first codebase. Before committing, clone the repository and run pnpm dev against a reachable backend, then open your own role in the menu management screen to confirm the dynamic route and button permissions match what you expect.

## FAQ

### What Node.js and pnpm versions does yudao-ui-admin-vue3 require?

The README states Node.js above 16.18.0 and pnpm above 8.6.0, and describes pnpm as mandatory. The package.json scripts are all written for pnpm, so npm and yarn are not documented paths.

### Can I run yudao-ui-admin-vue3 without the Yudao backend?

No. The README points to two separate backends, a Spring Boot monolith at doc.iocoder.cn and a Spring Cloud architecture at cloud.iocoder.cn, and this repository contains only the Vue 3 front end. The README documents no mock server, so screens that call backend APIs will not work on their own.

### How do I build yudao-ui-admin-vue3 for production?

Run pnpm build:prod, which invokes Vite with the prod mode and the 8192 MB old-space flag. Separate scripts exist for dev, test, stage and local modes, and the matching .env files sit in the repository root.

## Sources

- [Issues](https://github.com/yudaocode/yudao-ui-admin-vue3/issues)
- [License: MIT](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/LICENSE)
- [README](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/README.md)
- [Releases](https://github.com/yudaocode/yudao-ui-admin-vue3/releases)
- [yudaocode/yudao-ui-admin-vue3 on GitHub](https://github.com/yudaocode/yudao-ui-admin-vue3)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/yudaocode-yudao-ui-admin-vue3