v3-admin-vite

Vue

Last updated Jul 8, 2026

7.0k

Stars

1.2k

Forks

Issues

Stars/day

Attention Score

View on GitHub ↗ Open in github.dev

Topics

#admin #axios #element-plus #eslint #pinia #pnpm #sass #template #typescript #vite #vue #vue-router

Language breakdown

No language data available.

▸ Files click to expand

README

V3 Admin Vite

English | 中文

Introduction

V3 Admin Vite is a well-crafted backend management system template, built with popular technologies such as Vue3, Vite, TypeScript, and Element Plus, and offers a great AI Vibe Coding experience!

Notifications

[!IMPORTANT]

Welcome to experience the brand-new version 5.0, a masterpiece crafted with great care! If it helps you, feel free to give a Star to show your support.

[!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 Code or AI IDE Cursor and Trae
Install the recommended plugins in the .vscode/extensions.json file
node 20.19+ or 22.12+
pnpm 10+

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), button-level permissions (permission directives, permission functions), 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