vue-pure-admin — Lightweight Vue 3 Admin with Element Plus and Zero Bloat

Introduction

vue-pure-admin is a lightweight yet fully functional Vue 3 admin template that prioritizes simplicity and performance. Built with Element Plus, Vite, and TypeScript, it strips away unnecessary abstractions while retaining enterprise essentials like permissions, theming, and responsive layouts.

What vue-pure-admin Does

• Delivers a complete admin shell with sidebar, tabs, and header navigation
• Supports both front-end and back-end permission control modes
• Provides 40+ demo pages covering common admin scenarios
• Offers a thin version (pure-admin-thin) for teams wanting minimal scaffolding
• Includes dark mode, layout switching, and watermark features

Architecture Overview

The project uses Vue 3 Composition API throughout with Pinia for state management. Routing leverages Vue Router 4 with dynamic route injection based on roles. The build system is Vite with automatic component and API imports via unplugin. CSS is handled by Tailwind CSS utility classes combined with Element Plus theming.

Self-Hosting & Configuration

• Requires Node.js 18+ and pnpm for dependency management
• Platform settings are centralized in src/config for easy overrides
• Environment variables in .env.* control API endpoints and feature toggles
• Deploy the dist folder to any static hosting after pnpm build
• Optional Docker deployment with the included Dockerfile and Nginx config

Key Features

• Sub-second cold start with Vite and on-demand component loading
• Internationalization with auto-detected and switchable locales
• Seamless dark/light mode transitions via CSS variables
• Persistent multi-tab navigation with right-click context menus
• Responsive layout that adapts to mobile screen sizes

Comparison with Similar Tools

• vue-vben-admin — More features and UI libraries but heavier bundle
• vue-element-admin — Vue 2 classic, larger community but legacy stack
• Ant Design Pro Vue — Ant ecosystem, different component library
• Soybean Admin — Similar lightweight philosophy, uses Naive UI instead
• Arco Design Pro — ByteDance components, more opinionated conventions

FAQ

Q: What is the difference between full and thin versions? A: The full version includes all demo pages and features. The thin version provides only the core framework (layout, auth, routing) as a clean starting point.

Q: Can I swap Element Plus for another UI library? A: The architecture allows it, but Element Plus is deeply integrated into the demo pages. Soybean Admin or Vben Admin offer multi-library variants.

Q: Does it support micro-frontend architecture? A: Yes, there are community examples integrating with qiankun and wujie for micro-frontend scenarios.

Q: How large is the production bundle? A: The thin version produces a gzipped bundle under 300KB, with route-level code splitting keeping initial loads fast.

Sources

• https://github.com/pure-admin/vue-pure-admin
• https://pure-admin.github.io/vue-pure-admin/