Frontend Permission Reference
Route, menu, role, and button-control examples help explain how admin permissions are organized at the interface layer.
Skip to content A design-focused admin template
Open, stable, and runnable,
Run the project first,
// STEP_01 // STEP_02 // STEP_03 Turn common admin experience
Art Design Pro Open Source
A design-focused admin template
built for efficient development
Art Design Pro is a mature Vue admin frontend project built with Vue 3, TypeScript, Vite, and Element Plus. It provides routes, menus, permissions, themes, tables, forms, common components, and streamlined scripts for internal tools, self-built systems, secondary development, and fast project starts.
VueTypeScriptElement PlusVitePiniaTailwind
01OPEN-SOURCE POSITIONING
Open, stable, and runnable,
a practical frontend foundation for admin systems
The open-source edition already includes common admin capabilities such as routes, menus, permissions, themes, tables, forms, component wrappers, and engineering conventions. Run it as a preview, or keep the core skeleton and connect your own business modules.
Theme and Layout Basics
Theme colors, layout modes, dark mode, and system configuration examples make it easier to adapt the visual style of your own project.
Clear Code Locations
Routes, components, composables, configuration, and utilities are clearly layered. TypeScript and the Composition API make takeover and secondary development smoother.
Run, reshape, and extend
Run the project first,
then learn why each module lives there.
The open-source edition is more than a set of demo pages. It also provides a practical frontend engineering structure, from startup, routing, and themes to component reuse and optional demo cleanup.
Clone the Project
Get the open-source repository, install dependencies, start the local service, and browse the project capabilities and page structure first.
Keep the Skeleton
Use the built-in cleanup script to remove demo data while keeping routes, themes, layouts, tables, and base components for a clean development environment.
Connect Your Business
Reuse the useful parts of the existing pages, remove unrelated demos, then connect your own APIs, menus, and page logic.
03Open-Source Philosophy
Turn common admin experience
into an open reference
Art Design Pro aims to organize the engineering problems that appear again and again in admin systems into a clear, readable, and maintainable open-source implementation. It does not bind you to a specific industry; it gives developers a reliable frontend foundation.
04FAQ
How to use the open-source edition
The open-source edition works well for self-built systems, internal tools, admin-template adaptation, and frontend engineering reuse. If you need full frontend/backend source code, client delivery licensing, or dedicated support, compare the commercial edition next.
More questions? Join the community discussion.Community
Is this project open source and free?
Yes. The open-source edition is released under an open-source license and can be used, modified, and improved for free. It is suitable as an admin frontend foundation for self-built systems, internal tools, template adaptation, and secondary development. If you need client delivery licensing, full frontend/backend source code, or dedicated support, compare the commercial plans.
Can the open-source edition be used in production projects?
Yes, especially for self-built systems, internal tools, and admin frontend project starts. It already covers routes, menus, permissions, themes, tables, forms, component wrappers, and state management. You can connect APIs, adjust pages, and complete project conventions based on your business requirements.
How do I clean demo pages and sample data?
The project includes a one-click cleanup script. Commit or back up your code first, then run pnpm clean:dev in the project root and enter yes when prompted. It will clean demo pages, components, mock data, route i18n data, sample code, and related styles.
Do I need to keep all demo pages?
No. Demo pages mainly show component combinations, table/form usage, and common business interfaces. You can delete them according to your project needs. Before deleting, make sure related routes, menu entries, and mock data are also cleaned up.
Where should I start with permissions and routes?
Start with route configuration and menu generation, then look at user info after login, role fields, button permissions, and page-level access control. Once you understand this path, switching between backend-returned menus and frontend static configuration becomes much easier.
What if I need full-stack source code and commercial delivery?
If your project needs full frontend/backend source code, client delivery licensing, deployment guidance, ongoing updates, and dedicated support, visit the commercial edition page and choose the license that fits your scenario. The open-source and commercial editions target different usage boundaries.
Start your admin frontend from the open-source edition
Read the quick start, run the local project, then explore the docs for routes, themes, permissions, components, and project structure.