RuoYi-Cloud-Vue3 is the front end half of a Chinese admin stack

One of three front ends for the same backend

RuoYi-Cloud-Vue3 is the front end for the RuoYi-Cloud distributed microservice permission system, built on Spring Boot, Spring Cloud and Alibaba, with Vue 3, Vite and Element Plus. The README explains the split plainly. This repository is the Vue 3, Element Plus and Vite variant, and the matching backend code lives in the RuoYi-Cloud repository, with a RuoYi-Cloud-Oracle variant also available. What makes the structure worth understanding is that three front ends are developed and maintained in parallel against the same backend, and the comparison table sets out the differences in full. The Vue 2 variant uses Vue 2, JavaScript, Vue CLI, Element UI, Vuex and Vue Router 3, and the table notes that its maintenance focus has already moved elsewhere. The TypeScript variant uses Vue 3 with TypeScript, Vite, Element Plus, Pinia and Vue Router 4, and is positioned for enterprise teams where types reduce communication cost. This Vue 3 variant is the one the table describes as the modern stack with better developer experience and performance, and the officially recommended active version. A team choosing between them is choosing a dependency set and a maintenance commitment, not a feature list.

The dependency set is current but not bleeding edge

The package manifest shows what a Vue 3 admin console looks like in practice. Element Plus is at 2.13.1 with its icon package, Vue is at 3.5.26, Pinia is at 3.0.4 for state and vue-router at 4.6.4. Data handling is axios at 1.13.2, and the charting is echarts at 5.6.0, which is what the service monitoring and pool monitoring pages render. There is a set of smaller utilities that tell you about the feature set, with clipboard, file-saver, js-cookie, js-beautify, fuse.js for fuzzy search, nprogress for the loading bar, vuedraggable, vue-cropper for avatar cropping, vue-quill for a rich text editor, and jsencrypt for RSA encryption of form fields, a common pattern in Chinese admin systems where a password field is encrypted before it is sent. The dev dependencies show Vite 6.4.1 with the Vue plugin, sass-embedded for styles, vite-plugin-compression for gzipping the output and vite-plugin-svg-icons to turn a directory of SVG files into a symbol sprite. There is also an auto-import plugin and a setup-extend plugin that removes some boilerplate from single file components. The quill override pins the editor to 2.0.2, which is a small but telling detail about how a large admin template handles a dependency with a history of breaking changes.

Running the front end locally

The front end run instructions are a clone, an install and a dev server:

git clone https://gitcode.com/yangzongzhuan/RuoYi-Cloud-Vue3.git
cd RuoYi-Cloud-Vue3
yarn --registry=https://registry.npmmirror.com
yarn dev

The registry override points yarn at the npmmirror mirror, which is a common choice in mainland China and is the reason it is in the documented command rather than in a config file. The scripts in the manifest show the rest of the workflow, with dev mapped to vite, build:prod to vite build, build:stage to vite build with the staging mode, and preview to vite preview. The three environment files at the top level, .env.development, .env.staging and .env.production, are where the API base URL and the other per-environment values live, which is the configuration point you will touch first when pointing the front end at your own backend. The dev server is documented as reachable at http://localhost:80, and the tree also carries an index.html, a public/ directory for static assets, a html/ directory, a vite/ directory with the build configuration, a bin/ directory and a src/ directory for the application code.

The backend is a set of Spring Cloud services on fixed ports

The system module listing in the README describes the backend that this front end talks to, and it is worth reading because the port numbers are part of the contract. The front end runs on port 80, the gateway module ruoyi-gateway on 8080, the authentication centre ruoyi-auth on 9200, the system module on 9201, the code generator on 9202, the scheduled job module on 9203, the file service on 9300 and the monitoring centre in ruoyi-visual on 9100. Below the API module sit the common modules, which include the core module, the data scope module that implements data permissions, the multi-datasource module, the log module, the Redis cache service, the security module and the Swagger module for the system interface documentation. A file service on its own port is a common pattern in Chinese admin stacks, since it lets a file be uploaded or served without pushing large payloads through the gateway. If you are pairing this front end with your own backend rather than the reference one, these port assignments are the first thing to reconcile, because they are also the values in the environment files.

Seventeen built-in admin modules, including the code generator

The built-in feature list is the reason to choose an admin template over writing one, and it is long. User management covers configuring system operators. Department management configures the organisation structure as a tree, which supports data permissions. Post management configures the jobs users hold. Menu management configures system menus, operation permissions and button permission identifiers. Role management assigns role menu permissions and sets the data scope by organisation. Dictionary management maintains the fixed data the system uses. Parameter management handles dynamic configuration. Notice and announcement cover system notices. Operation logs and login logs record normal and abnormal activity, with the login log including failed attempts. Online users monitors who is currently active. Scheduled jobs run tasks online and log the results. The code generator produces front end and back end code, in Java, HTML, XML and SQL, and supports downloading the CRUD output. The system interface module generates API documentation from business code. Service monitoring watches CPU, memory, disk and heap. The online builder turns dragged form elements into HTML code. And the connection pool monitor watches the database connection pool and can analyse SQL to find performance bottlenecks. The code generator is the piece that changes the economics of this kind of template, since it turns a new table into a working screen and a service without writing either by hand.

Licence, hosting and where the project is maintained

The project is MIT licensed, which is the permissive choice and matters for a template you will modify heavily. The upstream home is on Gitee, at the y_project organisation for RuoYi-Cloud, with mirrors and the TypeScript branch on GitCode under the yangzongzhuan account, and the site for the project is at ruoyi.vip with documentation at doc.ruoyi.vip. The README carries a live demo with the credentials admin and admin123, and describes the demo as upgraded thanks to tips that were sent in. The release history in this repository shows 3.6.8 on 2026-03-29, 3.6.7 on 2025-12-22 and 3.6.6 on 2025-05-30, so the front end moves on the order of a few times a year rather than monthly. The repository is not archived and the last push was on 2026-09-16. The tree also carries a CONTRIBUTING.md, a SECURITY.md, a CODE_OF_CONDUCT.md and a .github/ directory, and the project maintains a QQ group for discussion. If your team works in Chinese, the documentation and the group are a real advantage; if not, the code comments and module names are the part you will need to navigate.

Editorial conclusion

Adopt RuoYi-Cloud-Vue3 when you want an admin console with user, role, menu, dictionary, job, code generation and monitoring modules already implemented, and you can also run and host the paired Spring Cloud backend. Do not adopt the front end alone, since every screen depends on services the separate backend repository provides, and do not expect the Vue 2 or TypeScript variants to be interchangeable, since they are maintained in parallel with different dependencies. Verify first that the backend you pair with exposes the API paths this front end expects, that the Element Plus and Vue versions in the manifest match your design system, and that you are on the version whose release cadence you can follow.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. yangzongzhuan/RuoYi-Cloud-Vue3 on GitHub