# jiaxiliang/vue-naive-admin architecture

> Architecture diagram of the GitHub repository jiaxiliang/vue-naive-admin, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jiaxiliang/vue-naive-admin
- Repository: https://github.com/jiaxiliang/vue-naive-admin

## Overview

Vue 3 administrative dashboard: a user enters through login or navigates to dashboard and management screens; route guards and shared identity/permission state support access control, while screens use API modules for server-backed operations. The app also provides configurable layouts, tabs, themes, and reusable CRUD/form/modal utilities. The tree and sampled files establish startup, routing, HTTP, and CRUD behavior; several screen and guard internals are unsampled, so their detailed wiring is not expanded.

Main entry points: [`src/router/index.js`](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/router/index.js) (Router), [`src/utils/http/index.js`](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/utils/http/index.js) (HTTP Client), [`src/App.vue`](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/App.vue) (Root App), [`src/main.js`](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/main.js) (App Bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_startup["App and Navigation"]
  node_main["App Bootstrap<br/>[main.js]"]
  node_app["Root App<br/>[App.vue]"]
  node_router["Router<br/>[index.js]"]
  node_guards["Route Guards<br/>[index.js]"]
  node_layout["Layouts"]
end

subgraph group_identity["Identity and Access"]
  node_login["Login Screen<br/>[index.vue]"]
  node_loginapi["Login API<br/>[api.js]"]
  node_authstore["Auth State<br/>[auth.js]"]
  node_permission["Permission State<br/>[permission.js]"]
  node_userstore["User State<br/>[user.js]"]
end

subgraph group_features["Admin Features"]
  node_home["Home Screen<br/>[index.vue]"]
  node_users["User Management<br/>[index.vue]"]
  node_userapi["User API<br/>[api.js]"]
  node_roles["Role Management<br/>[index.vue]"]
  node_roleapi["Role API<br/>[api.js]"]
  node_resources["Resource Management<br/>[index.vue]"]
  node_resourceapi["Resource API<br/>[api.js]"]
  node_profile["Profile Screen<br/>[index.vue]"]
  node_profileapi["Profile API<br/>[api.js]"]
end

subgraph group_shared["Shared Platform"]
  node_crud["CRUD Composable<br/>[useCrud.js]"]
  node_modal["Modal Component<br/>[index.vue]"]
  node_form["Form Composable<br/>[useForm.js]"]
  node_request["HTTP Client<br/>[index.js]"]
  node_api["Shared API<br/>[index.js]"]
  node_appstore["App Preferences<br/>[app.js]"]
  node_tabstore["Tab State<br/>[tab.js]"]
  node_session[("Session Storage")]
end

node_person(("Administrator"))
node_backend["Backend Service"]

node_person -->|"uses"| node_app
node_main -->|"mounts"| node_app
node_main -->|"initializes"| node_router
node_main -->|"installs state"| node_authstore
node_app -->|"renders routes"| node_router
node_router -->|"registers guards"| node_guards
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_users
node_router -->|"routes to"| node_roles
node_router -->|"routes to"| node_resources
node_router -->|"routes to"| node_profile
node_app -->|"selects layout"| node_layout
node_login -->|"uses"| node_loginapi
node_loginapi -->|"sends requests"| node_request
node_users -->|"uses"| node_userapi
node_roles -->|"uses"| node_roleapi
node_resources -->|"uses"| node_resourceapi
node_profile -->|"uses"| node_profileapi
node_userapi -->|"sends requests"| node_request
node_roleapi -->|"sends requests"| node_request
node_resourceapi -->|"sends requests"| node_request
node_profileapi -->|"sends requests"| node_request
node_api -->|"sends requests"| node_request
node_request -->|"HTTP calls"| node_backend
node_crud -->|"uses"| node_form
node_crud -->|"opens"| node_modal
node_app -->|"reads preferences"| node_appstore
node_app -->|"reads tabs"| node_tabstore
node_appstore -->|"persists settings"| node_session
node_guards -->|"checks access"| node_permission

click node_main "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/main.js"
click node_app "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/App.vue"
click node_router "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/router/index.js"
click node_guards "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/router/guards/index.js"
click node_layout "https://github.com/jiaxiliang/vue-naive-admin/tree/2.x/src/layouts"
click node_login "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/login/index.vue"
click node_loginapi "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/login/api.js"
click node_authstore "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/auth.js"
click node_permission "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/permission.js"
click node_userstore "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/user.js"
click node_home "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/home/index.vue"
click node_users "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/user/index.vue"
click node_userapi "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/user/api.js"
click node_roles "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/role/index.vue"
click node_roleapi "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/role/api.js"
click node_resources "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/resource/index.vue"
click node_resourceapi "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/resource/api.js"
click node_profile "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/profile/index.vue"
click node_profileapi "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/profile/api.js"
click node_crud "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/composables/useCrud.js"
click node_modal "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/components/me/modal/index.vue"
click node_form "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/composables/useForm.js"
click node_request "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/utils/http/index.js"
click node_api "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/api/index.js"
click node_appstore "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/app.js"
click node_tabstore "https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/tab.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_router,node_guards,node_layout toneBlue
class node_login,node_loginapi,node_authstore,node_permission,node_userstore toneAmber
class node_home,node_users,node_userapi,node_roles,node_roleapi,node_resources,node_resourceapi,node_profile,node_profileapi toneMint
class node_crud,node_modal,node_form,node_request,node_api,node_appstore,node_tabstore,node_session toneRose
class node_person,node_backend toneIndigo
```

## Components

### App and Navigation

- [App Bootstrap](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/main.js): `src/main.js`
- [Root App](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/App.vue): `src/App.vue`
- [Router](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/router/index.js): `src/router/index.js`
- [Route Guards](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/router/guards/index.js): `src/router/guards/index.js`
- [Layouts](https://github.com/jiaxiliang/vue-naive-admin/tree/2.x/src/layouts): `src/layouts`

### Identity and Access

- [Login Screen](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/login/index.vue): `src/views/login/index.vue`
- [Login API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/login/api.js): `src/views/login/api.js`
- [Auth State](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/auth.js): `src/store/modules/auth.js`
- [Permission State](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/permission.js): `src/store/modules/permission.js`
- [User State](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/user.js): `src/store/modules/user.js`

### Admin Features

- [Home Screen](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/home/index.vue): `src/views/home/index.vue`
- [User Management](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/user/index.vue): `src/views/pms/user/index.vue`
- [User API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/user/api.js): `src/views/pms/user/api.js`
- [Role Management](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/role/index.vue): `src/views/pms/role/index.vue`
- [Role API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/role/api.js): `src/views/pms/role/api.js`
- [Resource Management](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/resource/index.vue): `src/views/pms/resource/index.vue`
- [Resource API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/pms/resource/api.js): `src/views/pms/resource/api.js`
- [Profile Screen](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/profile/index.vue): `src/views/profile/index.vue`
- [Profile API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/views/profile/api.js): `src/views/profile/api.js`

### Shared Platform

- [CRUD Composable](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/composables/useCrud.js): `src/composables/useCrud.js`
- [Modal Component](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/components/me/modal/index.vue): `src/components/me/modal/index.vue`
- [Form Composable](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/composables/useForm.js): `src/composables/useForm.js`
- [HTTP Client](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/utils/http/index.js): `src/utils/http/index.js`
- [Shared API](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/api/index.js): `src/api/index.js`
- [App Preferences](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/app.js): `src/store/modules/app.js`
- [Tab State](https://github.com/jiaxiliang/vue-naive-admin/blob/2.x/src/store/modules/tab.js): `src/store/modules/tab.js`
- **Session Storage**

### Other components

- **Administrator**
- **Backend Service**

## Connections

- Administrator → Root App: uses
- App Bootstrap → Root App: mounts
- App Bootstrap → Router: initializes
- App Bootstrap → Auth State: installs state
- Root App → Router: renders routes
- Router → Route Guards: registers guards
- Router → Login Screen: routes to
- Router → Home Screen: routes to
- Router → User Management: routes to
- Router → Role Management: routes to
- Router → Resource Management: routes to
- Router → Profile Screen: routes to
- Root App → Layouts: selects layout
- Login Screen → Login API: uses
- Login API → HTTP Client: sends requests
- User Management → User API: uses
- Role Management → Role API: uses
- Resource Management → Resource API: uses
- Profile Screen → Profile API: uses
- User API → HTTP Client: sends requests
- Role API → HTTP Client: sends requests
- Resource API → HTTP Client: sends requests
- Profile API → HTTP Client: sends requests
- Shared API → HTTP Client: sends requests
- HTTP Client → Backend Service: HTTP calls
- CRUD Composable → Form Composable: uses
- CRUD Composable → Modal Component: opens
- Root App → App Preferences: reads preferences
- Root App → Tab State: reads tabs
- App Preferences → Session Storage: persists settings
- Route Guards → Permission State: checks access