Skip to content

Guide · Open source

How to use vue-vben-admin: install, run and build

Updated · written with AI from the project's own documentation and checked against our catalogue data

Vue Vben Admin is a free, open source starter template for building back-office admin panels, the web dashboards used to manage data and users. It is built on Vue 3, Vite and TypeScript. This guide shows you how to get the code, install dependencies, run the development server and build for production, so you can start your own admin project from a working base.

Vben Adminvbenjs/vue-vben-admin · ★ 33.7k · MIT

Quick start

  1. 1Clone the repository. Run git clone on the vbenjs/vue-vben-admin repository from GitHub to get the code.
  2. 2Enter the project folder. Change into the vue-vben-admin directory so the following commands run in the right place.
  3. 3Enable corepack. Run npm i -g corepack to make pnpm available, as the README describes.
  4. 4Install dependencies. Run pnpm install to download the project's dependencies.
  5. 5Start the dev server. Run pnpm dev and open the local address it prints to view the app.
  6. 6Build for production. Run pnpm build when you are ready to produce a production build.

What you need before you start

The README lists three prerequisites: Git, Node.js and pnpm. pnpm is installed through corepack, which the README enables with a single npm command.

Vue Vben Admin is a clone-and-build project. You download the source, install its dependencies and run it on your own machine, so it is aimed at developers rather than people who want a dashboard with no setup.

  • Git, to clone the repository
  • Node.js, to run the toolchain
  • pnpm, enabled through corepack

Get the project code and install dependencies

Clone the repository from GitHub, then move into the project folder. Enable corepack and install the dependencies with pnpm.

The README shows these commands in its Install and Use section.

git clone https://github.com/vbenjs/vue-vben-admin.git cd vue-vben-admin npm i -g corepack pnpm install

Run the development server

Start the project locally with the dev command. This runs the app in development mode so you can view and change it in your browser.

The README's preview section mentions a test account, vben with password 123456, for the full demo site. Check the README for the current details before you rely on it.

pnpm dev

Build for production

When you are ready to deploy, run the build command. The README lists it as the production build step in the same Install and Use section.

pnpm build

Learn the structure and customise the template

The README highlights several built-in areas you can use as a starting point: theming, internationalization and permissions. The permissions feature generates dynamic routes based on permissions.

The README also says the project can be used as a learning reference for a larger Vue admin structure. Read the project documentation linked in the README for how the pieces fit together.

  • Themes: multiple theme colours with customisable options
  • Internationalization: built-in support
  • Permissions: dynamic route-based permission generation
  • TypeScript and Vite already configured

Check browser support and older versions

The README says the project supports modern browsers only and does not support Internet Explorer. Its browser table lists the last 2 versions of Edge, Firefox, Chrome and Safari.

The latest release is not compatible with previous releases. If you are working on an older Vue 2 stack, the README points to a separate v2 branch for the old code.

What people use it for

  • Starting a new back-office dashboard for managing users and data
  • Using a TypeScript and Vite setup that is already configured as a base for a Vue 3 project
  • Studying how a larger Vue admin project is organised
  • Adding a multi-language admin interface using the built-in internationalization

Frequently asked questions

Is vue-vben-admin free?

Yes. The README describes it as a free and open source template, and the repository is released under the MIT licence. You can clone it and use it as a starting point.

What do I need to install to use vue-vben-admin?

The README lists Git, Node.js and pnpm. You enable pnpm with npm i -g corepack, then run pnpm install inside the project folder.

What commands run vue-vben-admin?

Use pnpm dev to run the development server and pnpm build to create a production build. Both commands come from the README's Install and Use section.

Does vue-vben-admin work with Vue 2?

Not the current version. The README says the latest release is not compatible with previous versions, and the older code is on a separate v2 branch.

Does vue-vben-admin support Internet Explorer?

No. The README states that the project supports modern browsers only and does not support Internet Explorer.

What are alternatives to vue-vben-admin?

Projects often compared with it include Vuexy, Naive UI Admin, vue-element-admin and SoybeanAdmin. Pick based on your UI library, Vue version and how much of the stack you want already set up.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Vue Vben Admin suits developers starting a new Vue 3 admin or back-office project who want TypeScript, Vite and features like internationalization and theming already set up. It is a poor fit for non-developers who want a dashboard with no setup, for Vue 2 projects, or for teams that need Internet Explorer support.

Install options & downloads