README.md
July 11, 2026 · View on GitHub
V3 Admin Vite - AI Friendly
English | 中文
Introduction 
V3 Admin Vite is an AI-friendly admin dashboard template built on mainstream technologies such as Vue3, Vite, TypeScript, and Element Plus, offering an excellent "Vibe Coding" experience!
Supports mainstream AI coding tools such as Claude Code, CodeX, Cursor, Trae, and Antigravity
Notifications
Important
Welcome to the all-new version 5.2, delivering a unique AI coding experience! It also introduces the long-awaited backend-controlled dynamic routing permission system
Warning
Version 4.x will no longer be maintained unless there are critical bugs! Click to switch to the 4.x branch
Tip
Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! Click to check it out
Note
If you have mobile web app requirements, give the new open-source template MobVue a try
Usage
Recommended Environment
- Latest version of
Visual Studio Codeor AI IDECursorandTrae - Install the recommended plugins in the
.vscode/extensions.jsonfile node20.19+ or 22.12+pnpm10+
Local Development
# Clone the project
git clone https://github.com/un-pany/v3-admin-vite.git
# Enter the project directory
cd v3-admin-vite
# Install dependencies
pnpm i
# Start the development server
pnpm dev
Build
# Build for the staging environment
pnpm build:staging
# Build for the production environment
pnpm build
Local Preview
# Execute the build command first to generate the dist directory, then run the preview command
pnpm preview
Code Check
# Code linting and formatting
pnpm lint
# Unit tests
pnpm test
Commit Guidelines
feat New feature
fix Bug fix
perf Performance improvement
refactor Code refactoring
docs Documentation and comments
types Type-related changes
test Unit tests related
ci Continuous integration, workflows
revert Revert changes
chore Chores (update dependencies, modify configurations, etc)
Install recommended skills
npx skills experimental_install
Links
Online Preview: github-pages
Chinese Documentation: link
Zero to Hero Tutorial: link
Mobile Web App: mobvue
Electron Desktop Version: v3-electron-vite
Chinese Repository: gitee, atomgit
Optional Group: check how to join
Donations: buy a coffee for the author
Releases & Changelog: releases
Features
Simplified structure: No complex encapsulation, no complicated type gymnastics, just enough to meet the needs
Detailed comments: Every configuration item comes with as detailed comments as possible
Latest dependencies: Keeps all third-party dependencies up to date
Consistency: Unified code style, naming conventions, and comment style
Built-in Features
User Management: Login, logout demonstration
Permission Management: Page-level permissions (dynamic routing controlled by backend APIs), button-level permissions (permission directives and functions), and route guards
Multiple Environments: Development, staging, and production environments
Multiple Themes: Normal, dark, and deep blue themes
Multiple Layouts: Left-side, top, and hybrid layouts
Homepage: Different dashboard pages for different users
Error Pages: 403, 404
Mobile Compatibility: Layouts compatible with mobile screen resolutions
Others: SVG sprite sheet, dynamic sidebar, dynamic breadcrumbs, tab navigation, content zoom and fullscreen, composable functions
Tech Stack
Vue3: Vue3 + script setup with the latest Vue3 Composition API
Element Plus: The Vue3 version of Element UI
Pinia: The legendary Vuex5
Vite: Really fast
Vue Router: The routing system
TypeScript: A superset of JavaScript
pnpm: A faster, disk-space-saving package manager
Scss: Consistent with Element Plus
CSS Variables: Primarily controls layout and color in the project
ESLint: Code linting and formatting
Axios: Sends network requests
UnoCSS: A high-performance, flexible atomic CSS engine
Project Preview Image
Contributors
A big thank you to all the contributors!