Vuetify Admin

screenshot of Vuetify Admin

Vuetify Admin

基于 vuetify3 的后台管理系统模板,内置动态路由、权限验证等功能


vuetify-admin is a backend management system template based on vuetify3. It comes with built-in features such as dynamic routing and permission validation. It also supports multiple tab mode with keep-alive, various theme colors, dark mode, and persistent state management. The template is optimized for build size and supports easy configuration for CDN integration. It offers a comprehensive set of components, including enhanced functions for Vuetify, toast notifications, fixed table headers and footers, loading indicators, image upload, right-click menus, form drawers, and more.


  • Multiple Tab Mode: Supports a tabbed interface with multiple pages that can be kept alive.
  • Theme Customization: Comes with multiple built-in theme colors and supports customization.
  • Dark Mode: Supports a dark mode for the admin dashboard.
  • Permission Control: Implements permission control and validation for accessing different functionalities based on user roles.
  • Dynamic Routing: Allows for dynamic routing within the backend management system.
  • Persistent State Management: Provides persistent state management for the application.
  • Optimized Build Size: The template is optimized for build size to ensure efficient performance.
  • CDN Integration Support: Allows for easy integration of CDN for enhanced performance.


To install vuetify-admin, follow these steps:

  1. Clone the repository:
git clone
  1. Change to the project directory:
cd vuetify-admin
  1. Install the dependencies:
npm install
  1. Start the development server:
npm run serve
  1. Access the application in your browser at http://localhost:8080.


vuetify-admin is a powerful backend management system template based on vuetify3. It offers a range of features such as multiple tab mode, theme customization, dark mode, permission control, dynamic routing, persistent state management, optimized build size, and CDN integration support. It provides a comprehensive set of components and enhanced functions for Vuetify. The installation process is straightforward, and users can easily get started with the template by following the provided instructions.


Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects


Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.