Skip to content
Get packs

Guide · Open source

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

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

vue-pure-admin is an open-source, ready-to-use template for back-office management systems, built with Vue 3, Vite, Element Plus, TypeScript and Pinia. It is aimed at developers who want a working admin layout with menus, tables and forms instead of building one from scratch. This guide shows how to get the project from the repository, run it locally, build it for production and run it in Docker.

vue-pure-adminpure-admin/vue-pure-admin · ★ 20.7k · MIT

Quick start

  1. 1Check prerequisites. Install Node.js and pnpm. The README does not state a required Node.js version.
  2. 2Clone the repository. Run git clone on the vue-pure-admin GitHub URL and move into the new folder.
  3. 3Install dependencies. Run pnpm install inside the project folder.
  4. 4Start the dev server. Run pnpm dev and open the local address it prints.
  5. 5Build for production. Run pnpm build when you are ready to deploy.
  6. 6Optional: run in Docker. Build the image with docker build and start a container mapping port 8080 to 80.

What vue-pure-admin is and who it suits

The README describes vue-pure-admin as an open-source, free and ready-to-use template for middle- and back-office management systems. It uses ES modules and the stack of Vue 3, Vite, Element-Plus, TypeScript and Pinia, and the README also mentions Tailwind CSS. The README states the project also works on mobile.

It is a developer template, not a finished product. You install it, run it and customize it. It suits developers starting a new internal admin project with Vue 3, teams already comfortable with Element Plus and TypeScript, and Chinese-speaking developers, since the README and docs are mainly in Chinese.

  • Good fit: a new internal or back-office project built on Vue 3
  • Good fit: developers who want a live demo to judge before adopting
  • Poor fit: teams standardized on React or another UI library
  • Poor fit: people who need a finished product without coding

Install vue-pure-admin from the repository

The README lists a clone-and-build route. You need Node.js (the README does not state a version) and pnpm. Clone the repository, move into the folder, then install dependencies with pnpm.

The README also offers the @pureadmin/cli scaffold, which lets you pick a template interactively. Use the clone route if you want the repository directly.

  • Prerequisites: Node.js (version not stated in the README) and pnpm
  • The README also offers Gitee as a clone source
git clone https://github.com/pure-admin/vue-pure-admin.git cd vue-pure-admin pnpm install

Run the dev server and build for production

To preview the project locally, start the dev server. When you are ready to deploy, run the production build command. The README does not describe the output folder, so check the project's build configuration before deploying.

The README also says the live preview is available at the project homepage, which lets you see the layout before you install anything.

  • Start the dev server with pnpm dev
  • Create a production build with pnpm build
pnpm dev pnpm build

Run vue-pure-admin in Docker

The README includes Docker support. Build an image from the Dockerfile in the project folder, then run a container that maps host port 8080 to container port 80. The README notes that the trailing dot in the build command points to the Dockerfile in the current directory.

After both commands run, open http://localhost:8080 in your browser. Docker Desktop can also be used to manage the containers through its interface.

  • Build the image with the name vue-pure-admin
  • Run the container named pure-admin, mapping port 8080 to 80
docker build -t vue-pure-admin . docker run -dp 8080:80 --name pure-admin vue-pure-admin

Choose between the full version and the slim version

The README says that for real projects you should use the slimmed-down pure-admin-thin version, which comes in a non-i18n and an i18n edition. It states the slim version keeps the main features and stays in sync with the full version code. The full repository is the one to study and customize for learning.

The README reports bundle size figures for the slim version, but these are the author's measurements and depend on your build settings, so verify them in your own project.

  • Full version: vue-pure-admin, the complete feature set
  • Slim version: pure-admin-thin, recommended for real projects, with non-i18n and i18n options

Contribute or report a problem

The README invites contributions. You can open an issue on GitHub or submit a pull request. The README gives a standard flow: fork the repository, create a branch, commit, push and open a pull request.

Commit messages follow a convention based on the Vue and Angular guidelines, using prefixes such as feat, fix, docs and refactor.

  • Open an issue through the GitHub issue chooser
  • Use prefixes such as feat, fix and docs in commit messages
git checkout -b feat/xxxx git push origin feat/xxxx

What people use it for

  • Starting a new internal dashboard with menus, tables and forms in Vue 3
  • Prototyping a back-office system and judging the layout on the live demo first
  • Building a Chinese-language admin product, since the docs are mainly in Chinese
  • Using the layout as a base for a mobile-friendly management interface, as the README describes

Frequently asked questions

Is vue-pure-admin free to use?

The README describes it as open-source and free, and the repository is listed under the MIT license. Check the LICENSE file in the repository for the full terms before using it commercially.

What do I need to install vue-pure-admin?

You need Node.js and pnpm. The README does not state which Node.js version is required, so check the project's package configuration or try a current LTS release.

What is the difference between vue-pure-admin and pure-admin-thin?

The README says vue-pure-admin is the full version, while pure-admin-thin is a slimmed-down version recommended for real projects. It keeps the main features and offers non-i18n and i18n editions.

How do I run vue-pure-admin locally?

Clone the repository, run pnpm install in the project folder, then run pnpm dev. The README says the project can also be opened in Gitpod.

Does vue-pure-admin work on mobile?

The README says the project supports mobile, and it includes a mobile screenshot. Test the layout in your own target devices before relying on it.

How does vue-pure-admin compare with vue-vben-admin or soybean-admin?

Those are comparable Vue admin templates. The README does not compare them, so evaluate each by its live demo, stack and documentation for your project's needs.

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

Use vue-pure-admin if you are starting an internal admin system on Vue 3, Element Plus and TypeScript, and you are comfortable reading Chinese documentation. Pick a different template if you use React or another UI library, need a lean base, or want a finished product without coding; for real projects, the README points to pure-admin-thin.

Install options & downloads