Vue Vben Admin screenshot

Vue Vben Admin

Author Avatar Theme by Vbenjs
Updated: 23 May 2025
28310 Stars

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!

Categories

Overview

Vue Vben Admin is a free and open source middle and back-end template that is built using the latest technologies such as Vue3, Vite4, and TypeScript. It provides out-of-the-box solutions for middle and back-end front-end development and can also be used for learning reference.

Features

  • State of the Art Development: Uses front-end technologies such as Vue3 and Vite2
  • TypeScript: Built with application-level JavaScript language
  • Theming: Configurable themes
  • Internationalization: Built-in complete internationalization program
  • Mock Server: Built-in mock data scheme
  • Authority: Built-in complete dynamic routing permission generation scheme
  • Component: Multiple commonly used components are encapsulated twice

Installation

To install Vue Vben Admin, follow these steps:

  1. Clone the project code from the repository.
  2. Install the required dependencies.
  3. Build the project.
  4. Run the Docker container.

Here is the code snippet for installing the dependencies:

npm install

To build the project, run the following command:

npm run build

To run the Docker container, use the Dockerfile located in the project root directory. Set the VG_BASE_URL environment variable to point to the desired back-end service address. For example, if the back-end service address is http://localhost:3333, and you want to map the container to port 6666, use the following command:

docker build -t vben-admin .
docker run -d -p 6666:80 -e VG_BASE_URL=http://localhost:3333 vben-admin

Lastly, you can access the application by navigating to http://localhost:6666 in your browser.

Summary

Vue Vben Admin is a powerful middle and back-end template built using the latest technologies. It provides a wide range of features such as state-of-the-art development tools, theming options, internationalization support, mock data server, and dynamic routing permission generation. Installing the template is easy with the provided code snippets. Overall, Vue Vben Admin is a great choice for anyone looking for a comprehensive solution for their middle and back-end front-end development needs.