vue-admin-box is a free, open-source Vue 3 + Vite + Element Plus admin dashboard template that ships four starter variants for building back-office management systems.
What is vue-admin-box?
vue-admin-box is a background management system template built with vue-next (Vue 3), Vite, and Element Plus, developed and maintained by individual developer cmdparkour. The repository provides a complete admin front-end application with routing, state management, API calling, and theme configuration already wired up; you clone it, install dependencies, and adapt the pages and API layer to your own backend. It outputs a runnable single-page admin app that you can deploy to any static host.
Key Features
- Four starter templates — separate branches supply TypeScript or JavaScript versions, each with or without internationalization, so teams can start from the closest match instead of removing code.
- Theme configuration — an expandable theme system with three default middle-and-back-office styles, adjustable without touching component source.
- Routing and state management — vue-router v4 handles routing and vuex v4 manages state, with state persistence to local storage supported out of the box.
- Axios and API management — a pre-wrapped Axios instance plus a structured API management layer suited to admin API patterns.
- Business table examples — the page-column section includes full add/edit/delete/query demos for a CRUD table, a category table, and a tree table.
- Cache-page refresh — cached pages can be refreshed without a route jump, a capability most admin frameworks do not provide.
- Internationalization — an extensible i18n setup with two base templates ready for translation; the README recommends the VSCode i18n Ally extension to speed up translating visible strings.
- Custom directives and common components — handwritten custom directives plus table and popup components reported to be verified across multiple admin business scenarios.
Who is it for?
- Back-end developers who want a ready-made admin front-end: clone the template, configure your API endpoints, and wire your own authentication without building the UI from scratch.
- Front-end developers on SaaS or internal-tool projects who need CRUD tables, theme switching, and i18n support preconfigured and working.
- Vue 3 learners who want a realistic, TypeScript-based project demonstrating vue-router v4, vuex v4, Vite build tooling, and Element Plus integration.
How does vue-admin-box work?
The README documents a four-step workflow: clone the repository with git clone https://github.com/cmdparkour/vue-admin-box.git, run npm install (or use yarn/cnpm in China for more reliable installs), start development with npm run dev or npm run start, and produce a production build with npm run build. Demo sites are hosted on Gitee Pages for China access and GitHub Pages for the rest of the world; the author notes that users outside China may prefer to download and run the project locally instead of visiting the online demo.
Use cases
- Rapid admin prototyping: take the
template-jsbranch and replace the placeholder table data with your own API responses to get a functional CRUD screen in an afternoon. - Multi-tenant back-office products: use the theme and i18n features to offer white-label styling and localized interfaces for clients.
- Open-source learning: study how the four template branches differ in TS/JS and i18n setup to understand modern Vue 3 project structure.
Alternatives
- vue-vben-admin — another Vue 3 + Vite + TypeScript admin template, listed as a partner project and designed for high customizability.
- ant-simple-pro — a middleware-appropriate admin template that supports Vue 3.0, React, and Angular, per the partner-project list.
Pricing
vue-admin-box is free for both commercial and personal use, and the project is open source. The author explicitly states there are no usage restrictions and asks only that you click star on GitHub before using it; no paid tiers are mentioned.
FAQ
Is vue-admin-box free?
Yes. The README states the project is free, open source, and does not restrict any commercial use or personal research. The author requests a GitHub star as encouragement rather than payment.
What tech stack does vue-admin-box use?
The core stack is Vue 3 (vue-next 3.0.5), Vite 2 (^2.8.6), Element Plus (^2.0.5), and TypeScript 4.1.3, with vue-router v4, vuex v4, axios, and @vueuse/core for routing, state, HTTP calls, and utilities.
Does vue-admin-box support internationalization?
Yes. The repository offers four base templates: TS with i18n, TS without, JS with, and JS without. The i18n setup is extensible, and the README recommends the VSCode i18n Ally extension for translating strings faster.
Where can I see a live demo?
Two demos are available: one on Gitee Pages for China (cmdparkour.gitee.io/vue-admin-box) and one on GitHub Pages for worldwide access (cmdparkour.github.io/vue-admin-box/dist). The author suggests downloading the project if the online demo is slow or unreachable from your region.
