Awesome Open Source
Awesome Open Source

V Naive Admin

English | 中文

brief introduction

V-Naive Admin is a free and open source middle and back office template. The latest mainstream technologies such as' vue3 vite2 TypeScript 'have been used to develop the out of the box front-end solution for the middle and back ends. I am writing an open source project for the first time, and I am also in a learning stage. The code may not be written gracefully. If you have better suggestions for my code and hope you can put forward a valuable button, I will humbly learn. Thank you.


OSCS Status

We have accessed OSCS Murphy Security ScanThe admin source code has not been scanned out of any risk items. More than 100% of the items are harmless to humans and animals! You can use it with confidence. Of course, if you don't trust, we recommend that you read the clone admin source code before using it. We are 100% open source, and you can see if there are risks.


  • 🎉 Latest technology stack:Developed using Vue3/Vite3 and other front-end cutting-edge technologies
  • 🎉 TypeScript: Language of application level JavaScript
  • 🎉 Components (Under development) Secondary encapsulation of multiple commonly used components
  • 🎉 jurisdiction Built in multiple dynamic routing permission generation schemes
  • 🎉 theme:Free, flexible and configurable theme
  • 🎉 internationalization:Built in internationalization scheme
  • 🎉 Mock data Built in Mock data scheme
  • 🎉 Naive-ui A new UI promoted by Youda, fully TypeScript written, with many components, convenient theme configuration and free use
  • 🎉 Pinia Pinia is Vue's repository. It has the same functions as Vuex, and is more comfortable than Vuex in ease of use. You can't put down the code prompt
  • 🎉 axios Easy to use, concise and efficient http library
  • 🎉 Eslint Built in code development specification to solve the problem of writing style inconsistency between multiple developers

Online preview

Test account: Admin / Pass123456!


✅ Basic functions of background management system

✅ eslint husky prettier stylelint cz-customizable

✅ Three common routing modes ROLE / BACK / MOVE

✅ (Dark / Light)theme / System theme / Top bar theme / Menu Theme

✅ Automatically introduce most UI components/custom global (src/components/*) components Icon / plug-in Api Reduce the number of imports

✅ The secondary packaging axios is simpler to use, and multiple functions are added to help development see README

✅ Support Mock data independent of backend

✅ Pinia I don't know until I experience it (It's great to tell you secretly 🤭)

To be completed

🔳 admin doc

🔳 update Vite3

🔳 Vue Router keepAlive

🔳 Vue Router animation

🔳 Visualize Vue Router configuration

🔳 Encapsulate common components

🔳 Vue-i18n project has completed plug-in configuration, and has not completed variable compilation

😭 Bug It must be necessary

🟡 To be supplemented...

use Gitpod

Open the project in Gitpod (a free online development environment for GitHub) and start coding immediately

Open in Gitpod


Document address


  • node-git-pnpm - Project development environment
  • Vite - be familiar with vite characteristic
  • Vue3 - be familiar with Vue Basic Grammar
  • Pinia - Pinia Chinese documents
  • TypeScript - be familiar with TypeScriptBasic Grammar
  • Es6+ - be familiar with es6 Basic Grammar
  • Vue-Router-Next - be familiar with vue-router Basic use
  • Naive UI - ui Basic use
  • Mock.js - mockjs Official website

Installation and use

  • Get project code
git clone
  • Initialize git commitizen
cd ./v-naive-admin

pnpm install -g commitizen
  • Installation Dependencies
pnpm install

  • run
pnpm dev
  • build
pnpm build

Update Log


Project address

How to contribute

You are very welcome to join Mention one Issue Or submit a Pull Request。

Pull Request:

  1. Fork code!
  2. Create your own branch: git checkout -b feat/xxxx
  3. Submit your changes: git commit -am 'feat(function): add xxxxx'
  4. Push your branch: git push origin feat/xxxx
  5. Submit pull request

Git Contribution submission specification

  • reference resources vue standard (Angular)

  • Using git cz instead of git commit, the project has built-in husky, which will check the code specification when submitting the code

  • feat Add new functions

  • fix Fix the problem / BUG

  • refactor restructure

  • docs Documentation/Notes

  • resou Resource changes (add or delete src/assets resources)

  • style The code style does not affect the running results

  • perf Optimization/performance improvement

  • test Test related

  • build Construction process and external dependency changes (such as upgrading the npm package and modifying the webpack configuration)

  • ci Continuous integration

  • chore Dependent update/scaffold configuration modification, etc

  • revert Undo Modification

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

 EdgeIE  EdgeEdge FirefoxFirefox ChromeChrome SafariSafari
not support last 2 versions last 2 versions last 2 versions last 2 versions

Relevant warehouse

If these plug-ins are helpful to you, they can be supported by a star




V-Naive-Admin It is a completely open source and free project, which helps developers develop medium and large management systems more easily, and also provides QQ communication group usage questions. Welcome to ask questions in the group.



MIT © VNaive-20222

This project can be used for commercial purposes free of charge. Please abide by the MIT agreement and retain the author's technical support statement.

Alternatives To V Naive Admin
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (306,134
Html (275,928
Vue (73,041
Admin (21,752
Axios (6,614
Less (5,734
Vite (2,603
Vue3 (2,347
Vue Router (2,090
Admin Template (555
Pinia (363
Windicss (135
Mockjs (89
Naive Ui (47
Naive Admin (3