vue3-element-admin

Vue3 + Vite + TypeScript Enterprise Admin Frontend

Introduction

vue3-element-admin is an enterprise-level admin frontend built with Vue 3, Vite, TypeScript, and Element Plus, paired with 9 mainstream backends + derivatives (covering Java / Node.js / Go / Python / PHP / C# / Rust 7 languages) and the mobile app youlai-app. Other frontend versions: JavaScript · Lite · NaiveUI.

Project Features

• Simple and Easy-to-use — A Vue3 upgrade of vue-element-admin with no over-encapsulation, easy to get started.
• Permission System — Dynamic routing, button permissions, role permissions, and data permissions.
• Multi-tenant — Supports multi-tenant mode and tenant isolation.
• Infrastructure — Internationalization, multiple layouts, dark mode, full screen, watermark, API documentation, and code generator.
• Data Interaction — Supports Mock data and online API documentation, with accompanying Java / Node backend source code.
• Continuous Updates — The project is continuously open-sourced and updated, keeping pace with the mainstream tech stack.

System Preview

PC

Mobile

Quick Start

Environment Requirements: Node.js ^20.19.0 or >=22.12.0 · pnpm >=8.0.0

Environment Type	Version Requirement	Notes
Node.js	^20.19.0 or >=22.12.0	LTS is recommended (even major versions)
Package Manager	pnpm >= 8.0.0	This project uses pnpm as the package manager
IDE	Visual Studio Code	Vue and TypeScript extensions recommended

# Clone repository
git clone https://gitee.com/youlaiorg/vue3-element-admin.git
cd vue3-element-admin

# Install pnpm (skip if already installed)
npm install pnpm -g

# Set mirror source (optional)
pnpm config set registry https://registry.npmmirror.com

# Install dependencies
pnpm install

# Start development server
pnpm run dev

After starting, visit http://localhost:3000 and log in with admin / 123456.

For more, see the official docs: Quick Start · Deployment Guide

AI Programming

This project ships with an Agent Skill. Once installed, the AI coding assistant automatically follows this project's Vue3 development conventions (naming, directory structure, BEM + UnoCSS, component and API conventions). It supports 70+ agents including CodeBuddy, Claude Code, Cursor, Codex, and GitHub Copilot.

npx skills add https://github.com/youlaitech/youlai-skills --skill vue-admin

Ecosystem Matrix

Frontend

Project	Tech Stack	Description	Status
vue3-element-admin	Vue 3 + Vite + TS + Element Plus	PC Admin (Main)	✅️
vue3-element-admin-js	Vue 3 + Vite + JS + Element Plus	JavaScript Version	✅️
vue3-element-template	Vue 3 + Vite + TS + Element Plus	Lite Template	✅️
vue3-naiveui-admin	Vue 3 + Vite + TS + Naive UI	Naive UI Version	✅️
youlai-app	Vue 3 + UniApp	Mobile App	✅️

Backend

Project	Tech Stack	Description	Status
youlai-boot	Spring Boot + MyBatis-Plus	Java (Main)	✅️
youlai-nest	NestJS + TypeORM	Node.js	✅️
youlai-gin	Go + Gorm	Go	✅️
youlai-django	Django + DRF	Python	✅️
youlai-fastapi	FastAPI + SQLAlchemy	Python	✅️
youlai-laravel	Laravel + Eloquent	PHP	✅️
youlai-think	ThinkPHP + ThinkORM	PHP	✅️
youlai-aspnet	ASP.NET Core + EF Core	C#	✅️
youlai-axum	Axum + SeaORM	Rust	✅️

All nine backends share the same RESTful API and database schema, frontends can switch seamlessly.

Derivatives

Project	Based On	Type	Description	Status
youlai-boot-tenant	youlai-boot	Repo	Multi-tenant SaaS, tenant isolation and tenant config	✅️
youlai-nest (multi-tenant)	youlai-nest	Branch	Multi-tenant SaaS, tenant isolation and tenant config	✅️
youlai-boot-flex	youlai-boot	Repo	Switched to MyBatis-Flex	✅️
youlai-boot (db-pg)	youlai-boot	Branch	PostgreSQL database branch	✅️
youlai-boot (multi-module)	youlai-boot	Branch	Multi-module project split	✅️
youlai-boot (spring-boot-3)	youlai-boot	Branch	Spring Boot 3 compatible branch	✅️

Development Guide

Name	Link
Video Tutorial	https://www.bilibili.com/video/BV1eFUuYyEFj
Project Setup	Building a Backend Management System from Scratch with Vue3, Vite, TypeScript, and Element-Plus
Official Documentation	https://www.youlai.tech/docs/web/
Deployment Guide	https://www.youlai.tech/docs/web/deployment/deploy.html
FAQ	https://www.youlai.tech/docs/faq/
Code Standards	ESLint V9 + Prettier + Stylelint + EditorConfig for Standardized and Unified Frontend Code Style
Commit Standards	Husky + Lint-staged + Commitlint + Commitizen + cz-git for Git Commit Standards
API Documentation	https://www.apifox.cn

Project Deployment

Run pnpm run build to bundle and generate the dist directory, upload it to the server and configure Nginx reverse proxy.

pnpm run build

For the detailed deployment flow (Nginx config, reverse proxy, HTTPS, etc.), see the Deployment Guide.

Data Interface

The frontend uses the online API by default, and can also switch to local Mock or connect to a local backend.

Local Mock: Set VITE_MOCK_DEV_SERVER in .env.development to true to enable local Mock interfaces, allowing standalone development without a backend.

Connect to Backend: All nine backends use the default port 8000. Change VITE_APP_API_URL in .env.development to http://localhost:8000 and start the corresponding backend (the recommended Java backend is youlai-boot; see each repo's README for the rest).

Commit Conventions

Run pnpm run commit to invoke the interactive git commit and complete the information input and selection according to the prompts.

Technical Cooperation

This project is open-sourced under the MIT license and free for commercial use. Feel free to submit issues or feedback in Issue, and pull requests in Pull Request are also welcome. For technical support, business cooperation, secondary development, or project customization, contact the author via WeChat (see QR code below).

WeChat Official Account

Mini Program

Add Author WeChat

Technical Exchange · Issue Feedback · Business Cooperation