Featured image of post 12 Vue 3 Backend Management Templates to Bookmark and Learn
Story Fiction Life

12 Vue 3 Backend Management Templates to Bookmark and Learn

1. Vben Admin

Vben Admin is a backend solution based on Vue 3.0, Vite, and TypeScript, aimed at providing an out-of-the-box solution for developing medium to large-scale projects. It includes features like component re-encapsulation, utilities, hooks, dynamic menus, permission validation, multi-theme configurations, and button-level permission control. The project uses the latest frontend technology stack, making it a good starting template for quickly building enterprise-level mid- to backend product prototypes. It can also serve as an example for learning vue3, vite, ts, and other mainstream technologies. The project will continue to follow the latest technologies and apply them within the project.

Features：

  • Latest Technology Stack: Developed using cutting-edge frontend technologies like Vue 3, Vite, and TypeScript.

  • Internationalization: Built-in comprehensive internationalization solutions with multi-language support.

  • Permission Validation: Comprehensive permission validation solutions, including button-level permission control.

  • Multi-Theme: Built-in multiple theme configurations & dark mode to meet personalized needs.

  • Dynamic Menu: Supports dynamic menus that can display based on permissions.

  • Mock Data: High-performance local Mock data solution based on Nitro.

  • Rich Components: Provides a wide range of components to meet most business needs.

  • Standardization: Code quality is ensured with tools like ESLint, Prettier, Stylelint, Publint, and CSpell.

  • Engineering: Development efficiency is improved with tools like Pnpm Monorepo, TurboRepo, and Changeset.

  • Multi-UI Library Support: Supports mainstream UI libraries like Ant Design Vue, Element Plus, and Vuetify, without being restricted to a specific framework.

Document Link - https://doc.vben.pro/en/

Preview Link - https://www.vben.pro/#/analytics

2. Naive Ui Admin

A ready-to-use front-end solution for middle and backend systems based on Vue 3, Vite 2, TypeScript, and the Naive UI component library.

Naive UI Admin adheres to the design and development conventions of the Naive UI component library, ensuring a consistent style. It utilizes the latest front-end technology stack and distills typical business models and pages, including secondary encapsulation components, dynamic menus, permission verification, and granular permission control. It can help you quickly build enterprise-level middle and backend projects.

Features:

  • A ready-to-use middle and backend framework that allows you to write less code.

  • Provides out-of-the-box enterprise-level front and back-end products, saving significant time for direct business development.

  • Multi-ecosystem support: offers multiple UI ecosystem support for enterprise products, optimizing development costs for both new and legacy projects, enabling rapid deployment.

  • True out-of-the-box usability in terms of framework level, business level, and page extensibility/composability, making it easy for beginners to get started.

  • Practical templates: extracts highly practical and general page designs from numerous systems and businesses, allowing for the easy construction of standardized and aesthetically pleasing systems.

Document Link - https://docs.naiveadmin.com/

Preview Link - https://plus.naiveadmin.com/dashboard/console

Github Link - https://github.com/jekip/naive-ui-admin

3. vue-admin-better

Features：

  • 40 + high quality single page

  • RBAC model + JWT permission control

  • 100,000 + project practical application

  • Good type definition

  • Open source version supports free commercial use

  • Cross-platform PC, mobile, tablet

  • Dynamic rendering of back-end routes

  • More than 50 items are configured globally

  • Supports mock automatic generation and automatic export

Preview Link - https://plus.naiveadmin.com/dashboard/console

Github Link - https://github.com/zxwk1998/vue-admin-better

4. vue-pure-admin

vue-pure-admin is an open-source, completely free, and ready-to-use middle and backend management system template. It is fully written and organized according to the ECMAScript Module (ESM) specification, utilizing the latest mainstream technologies such as Vue 3, Vite, Element-Plus, TypeScript, Pinia, and Tailwind CSS. It offers various versions including a full version, a streamlined version, a JS version, a max version, a micro-frontend version, a Tauri version, and an Electron version.

Features:

  • Latest Technology Stack: Developed using the latest technologies such as Vue 3, Vite, Element-Plus, TypeScript, Pinia, and Tailwind CSS while maintaining stability.

  • Fast Hot Reloading and Optimized Packaging: Provides extremely fast module hot reloading (HMR) regardless of application size, with a complete built-in packaging optimization scheme.

  • Easy to Get Started with Rich Components and Utility Functions: Uses single-file component syntax, providing many rich out-of-the-box components and utility libraries.

  • Streamlined Version with Permanent Synchronization: Offers both internationalized and non-internationalized streamlined versions, with packaging sizes under 350kb when Brotli compression and CDN replacement for local libraries are enabled.

  • Highly Configurable Theme and Four Menu Layouts: Features a highly configurable theme and dark mode support, offering four types of menu layouts: left, top, mixed, and dual-column.

  • RBAC Permission Management with Granular Control: Utilizes the commonly used RBAC (Role-Based Access Control) model (User -> Role -> Permission), allowing for configurable granular permissions.

Document Link - https://pure-admin.github.io/pure-admin-doc/

Preview Link - https://pure-admin.github.io/vue-pure-admin/#/welcome

Github Link - https://github.com/zxwk1998/vue-admin-better

5. soybean-admin

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS.

Features：

  • Cutting-edge technology application: using the latest popular technology stack such as Vue3, Vite5, TypeScript, Pinia and UnoCSS.

  • Clear project architecture: using pnpm monorepo architecture, clear structure, elegant and easy to understand.

  • Strict code specifications: follow the SoybeanJS specification, integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.

  • TypeScript: support strict type checking to improve code maintainability.

  • Rich theme configuration: built-in a variety of theme configurations, perfectly integrated with UnoCSS.

  • Built-in internationalization solution: easily realize multi-language support.

  • Automated file routing system: automatically generate route import, declaration and type. For more details, please refer to Elegant Router.

  • Flexible permission routing: support both front-end static routing and back-end dynamic routing.

  • Rich page components: built-in a variety of pages and components, including 403, 404, 500 pages, as well as layout components, tag components, theme configuration components, etc.

  • Command line tool: built-in efficient command line tool, git commit, delete file, release, etc.

  • Mobile adaptation: perfectly support mobile terminal to realize adaptive layout.

Document Link - https://pure-admin.github.io/pure-admin-doc/

Preview Link - https://antd.soybeanjs.cn/home

Github Link - https://github.com/soybeanjs/soybean-admin

6. Geeker-Admin

Geeker-Admin is an open-source backend management framework based on Vue 3.4, TypeScript, Vite 5, Pinia, and Element-Plus, developed using the latest technology stack. The project provides a powerful ProTable component, which enhances your development efficiency to a certain extent. Additionally, it encapsulates several commonly used components, hooks, directives, dynamic routing, and button-level permission control features.

Project Features:

  • Development with Vue 3.4 + TypeScript: Utilizes single-file components with <script setup> syntax.

  • Vite 5 as Development and Packaging Tool: Configures gzip/Brotli packaging, TSX syntax, and cross-origin proxy support.

  • Pinia Instead of Vuex: Lightweight, simple, and easy to use, with integrated Pinia persistence plugin.

  • TypeScript Wrapper for Axios: Comprehensive second-layer encapsulation of Axios (request interception, cancellation, common request encapsulation, etc.).

  • ProTable Component Based on Element: All table pages are configured with Columns, enhancing flexibility.

  • Support for Element Component Size Switching: Offers multi-theme layouts, dark mode, and i18n internationalization.

  • Dynamic Routing Permission Control with VueRouter: Configures dynamic route permission interception and lazy loading, supporting page-level button permission control.

  • KeepAlive for Page Caching: Supports multi-level nested route caching.

  • Development of Common Custom Directives: Includes directives for permissions, copying, watermarking, dragging, throttling, debouncing, and long presses.

  • Unified Code Formatting with Prettier: Integrates ESLint and Stylelint for code validation standards.

  • Use of Husky, Lint-Staged, Commitlint, Czg, and Cz-Git: Standardizes commit messages.

Preview Link - https://admin.spicyboy.cn

Github Link - https://github.com/HalseySpicy/Geeker-Admin/

7. v3-admin-vite

V3 Admin Vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element Plus, Pinia and Vite.

Features：

  • Very concise：No complicated encapsulation, no complicated type gymnastics, out of the box

  • Detailed annotations：Each configuration item is written with as detailed comments as possible

  • Latest dependencies: Regularly update all third-party dependencies to the latest version

  • Very specification: The code style is unified, the naming style is unified, and the comment style is unified

  • User management: Log in and out of the demo

  • Authority management: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards

  • Multiple Environments: Development, Staging, Production

  • Multiple themes: Normal, Dark, Dark Blue, three theme modes

  • Multiple layouts：Left, Top, Left Top, three layout modes

  • Error page: 403, 404

  • Dashboard: Display different Dashboard pages according to different users

  • Other functions：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)

Preview Link - https://un-pany.github.io/v3-admin-vite/#/dashboard

Github Link - https://github.com/un-pany/v3-admin-vite

8. coreui-free-vue-admin-template

CoreUI is a standalone, reliable, free Vue management template that provides a perfect foundation for enterprise-level development. It is based on Bootstrap 5 and Vue 3, offering lightweight code that is responsive and cross-browser compatible, supporting both light and dark modes, along with detailed documentation and long-term support.

Features:

  • Create Beautiful, Responsive Applications Without Design Skills: No design expertise required.

  • Open Source with Enterprise-Level Support: Enjoy the benefits of both open-source and commercial products.

  • Easy Customization of Appearance and Functionality: Customize without delving into complex code.

  • A Wealth of Common UI Components, Tools, and Plugins Ready to Use: Out-of-the-box components for rapid development.

  • Quickly Start New Projects: Save time on environment setup.

Document Link - https://coreui.io/product/free-vue-admin-template/

Preview Link - https://coreui.io/demos/vue/5.0/free/?theme=light#/dashboard

Github Link - https://github.com/coreui/coreui-free-vue-admin-template

9. materio-vuetify-vuejs-admin-template-free

Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template

Features：

  • Vue 3, Vite 3 & Vuetify 3 - Uses the latest Vuetify 3

  • File based routing

  • Components auto importing

  • Layout system

  • Use icons from any icon sets with classes by Iconify

  • I18n ready

  • Use the <script setup> syntax

  • APIs auto importing - use Composition API and others directly

  • TypeScript & JavaScript versions

Document Link - https://demos.themeselection.com/materio-vuetify-vuejs-admin-template/documentation/

Preview Link - https://demos.themeselection.com/materio-vuetify-vuejs-admin-template-free/demo/dashboard

Github Link - https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free

10. Vuestic Admin

Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy maintenance, and high accessibility. Built on Vuestic UI, Vue 3, Vite, Pinia, and Tailwind CSS.

Features：

  • Vue 3, Vite, Pinia, and Tailwind CSS - Fast and efficient development

  • Dark Theme - Modern and eye-catching

  • Global Configuration - Effortless customization

  • Accessibility - Inclusive and user-friendly

  • i18n Integration - Easy localization for global reach

  • Educational Resource - Ideal for learning and improving skills

  • Responsive Design - Adapts seamlessly to all devices

  • Professional Support - Reliable help from the experts

  • Highly Customizable - Tailor to your project’s style

Document Link - https://ui.vuestic.dev/

Preview Link - https://admin-demo.vuestic.dev/dashboard

Github Link - https://github.com/epicmaxco/vuestic-admin

11. lux-ui

Create the best admin based on Vue3.x, Vite5.x, TypeScript, Vuetify3.x, Chat GPT

Features：

  • Vue 3.2

  • Vite 4.x

  • UI Framework Vuetify 3

  • TypeScript

  • Component Auto Importing

  • Pinia

  • <script setup>

  • Use icons from any icon sets in Iconify

  • Deploy on Netlify, zero-config

  • Firebase auth

  • Echarts, ApexChart

  • Openai, Chatgpt

  • vue-i18n

  • virtual-scroller , vuedraggable , perfect-scrollbar

  • Rich Text Editor

  • Responsive multi-platform adaptive

Document Link - https://worlds-yawn-cc0.craft.me/tAMVv4hUxZIH6G

Preview Link - https://lux.vuetify3.com/dashboard

Github Link - https://github.com/yangjiakai/lux-ui

12. gin-vue-admin

Vite + Vue 3 + Gin provides a foundational development platform enhanced by AI, supporting a mix of TypeScript and JavaScript. It integrates essential development features such as JWT authentication, permission management, dynamic routing, controllable component visibility, pagination encapsulation, multi-point login interception, resource permissions, file uploading and downloading, code generation, form generation, and configurable import/export functionalities.

Features:

  • Plugin Center NEW: Based on GVA’s unique design style, it features a proprietary plugin center that currently supports plugins for WeChat payments, login, K8s-related operations, third-party logins, and more.

  • Permission Management: Implemented using JWT and Casbin for managing permissions.

  • File Uploading and Downloading: Supports file uploads and downloads from local systems, Qiniu Cloud, Alibaba Cloud, and Tencent Cloud.

  • User Management: System administrators can assign user roles and permissions.

  • Role Management: Create the main objects for permission control, allowing different API permissions, menu permissions, and button permissions to be assigned to roles.

  • Menu Management: Enables dynamic menu configuration for users, managing button permissions to provide different menus for different roles.

  • API Management: Different users can have varying permissions for accessing API endpoints.

  • Configuration Management: Configuration files can be modified from the frontend (this feature is not available in the testing environment).

  • Rich Text Editor: Embeds a Markdown editor functionality.

  • Conditional Search: Adds examples for conditional searching.

  • RESTful Examples: Provides sample APIs that can be referenced in the user management module.

  • Multi-Point Login Restriction: Requires setting useMultipoint to true in config.yaml (Redis and Config parameters must be configured manually; please report any bugs during the testing phase).

  • Chunked Uploads: Provides examples for file chunk uploads and large file chunk uploads.

  • Form Generator: Utilizes Variant Form for form generation.

  • Code Generator: Generates foundational logic for the backend along with simple CRUD code.

Document Link - https://www.gin-vue-admin.com/

Preview Link - https://demo.gin-vue-admin.com/#/layout/dashboard

Github Link - https://github.com/flipped-aurora/gin-vue-admin