Vue Vben Admin Save

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!

Project README
VbenAdmin Logo


Vue vben admin

English | 中文


Vue Vben Admin is a free and open source middle platform/back-end template. Using the latest vue3, vite4, TypeScript and other mainstream technology, Vben is the out-of-the-box front-end solution for both production and learning purpose.


  • State-of-art Techinical Stack:Using the latest and popular front-end technology such as Vue3/vite2
  • TypeScript: Application-level JavaScript language
  • Theming: Configurable themes
  • International:Built-in i18n support
  • Response Mock: Built-in response mock ability
  • Authority: Built-in permission system based on dynamic routes.
  • Component: Extracted and encapsulated components for various scenarios.


Test account: vben/123456

VbenAdmin Logo VbenAdmin Logo VbenAdmin Logo

Use Gitpod

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

Open in Gitpod




  • node and git - Project development environment
  • Vite - Familiar with vite features
  • Vue3 - Familiar with Vue basic syntax
  • TypeScript - Familiar with the basic syntax of TypeScript
  • Es6+ - Familiar with es6 basic syntax
  • Vue-Router-Next - Familiar with the basic use of vue-router
  • Ant-Design-Vue - ui basic use
  • Mock.js - mockjs basic syntax

Install and use

  • Get the project code
git clone
  • Install dependencies
cd vue-vben-admin

pnpm install

  • run
pnpm serve
  • build
pnpm build
  • docker

The dockerFile is located in the project root directory and supports differential deployment

build image

docker build -t vue-vben-admin .

Use environment variables to achieve differentiated container deployment. Specify service endpoint by assigning VG_BASE_URL. In the following example, http://localhost:3333 is used as the back-end service address and the container is mapped to port 6666:

docker run --name vue-vben-admin -d -p 6666:80  -e VG_BASE_URL=http://localhost:3333 vue-vben-admin

Then you can navigate to http://localhost:6666

Change Log



How to contribute

You are very welcome to join!Raise an 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. submitpull request

Git Contribution submission specification

  • reference vue specification (Angular)

    • feat Add new features
    • fix Fix the problem/BUG
    • style Modify the code style/format that does not affect the feature
    • perf Optimization/performance improvement
    • refactor Refactor
    • revert Undo edit
    • test Test related
    • docs Documentation/notes
    • chore Dependency update/scaffolding configuration modification etc.
    • workflow Workflow improvements
    • ci Continuous integration
    • types Type definition file changes
    • wip In development

If these plugins are helpful to you, you can show support by leaving a star!

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, doesn't include IE

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


@Vben @Jinmao


JetBrains Logo (Main) logo.

Star History Chart

Star History Chart


MIT © Vben-2020

Open Source Agenda is not affiliated with "Vue Vben Admin" Project. README Source: vbenjs/vue-vben-admin

Open Source Agenda Badge

Open Source Agenda Rating