# gdarko/laravel-vue-starter architecture

> Architecture diagram of the GitHub repository gdarko/laravel-vue-starter, 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/gdarko/laravel-vue-starter
- Repository: https://github.com/gdarko/laravel-vue-starter

## Overview

Laravel Vue Starter is a cookie-authenticated admin-panel SPA template. A user enters through the Vue router, signs in or registers through the auth service, then uses protected dashboard, profile, and user-management pages; those pages call Laravel endpoints, which authorize and process user operations. The backend also provides role-based authorization and avatar media handling. README-documented capabilities include password recovery, verification, localization, notifications, and a reusable component showcase. Some backend routes and frontend wiring are unsampled, so links below are limited to documented behavior or visible calls.

Main entry points: [`resources/app/router/routes.js`](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/router/routes.js) (Page routes), [`resources/app/services/AuthService.ts`](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/services/AuthService.ts) (Auth service), [`app/Models/User.php`](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Models/User.php) (User model), [`app/Http/Controllers/UserController.php`](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Http/Controllers/UserController.php) (User endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_spa["Vue SPA"]
  node_routes["Page routes<br/>[routes.js]"]
  node_app["SPA shell<br/>[App.vue]"]
  node_dashboard["Dashboard<br/>[Main.vue]"]
  node_profile["Profile settings<br/>[Main.vue]"]
  node_components["UI showcase<br/>[Main.vue]"]
end

subgraph group_identity["Identity and Access"]
  node_authstore["Auth state<br/>[auth.js]"]
  node_authservice["Auth service<br/>[AuthService.ts]"]
  node_authpages["Sign-in and signup<br/>[Main.vue]"]
  node_fortify["Fortify actions"]
  node_authcontroller["Auth endpoints<br/>[AuthController.php]"]
end

subgraph group_users["User Operations"]
  node_userspage["User directory<br/>[Index.vue]"]
  node_userservice["User service<br/>[UserService.ts]"]
  node_usercontroller["User endpoints<br/>[UserController.php]"]
  node_userdomain["User domain<br/>[UserService.php]"]
  node_media["Avatar media<br/>[MediaService.php]"]
end

subgraph group_backend["Laravel API"]
  node_role["Role management<br/>[RoleService.php]"]
  node_api["API routes<br/>[api.php]"]
  node_web["Web routes<br/>[web.php]"]
  node_user_model["User model<br/>[User.php]"]
  node_role_model["Role model<br/>[Role.php]"]
  node_database[("Application database")]
  node_sanctum["Sanctum session auth<br/>[sanctum.php]"]
  node_media_store[("Media storage<br/>[filesystems.php]")]
end

node_person(("Panel user"))

node_person -->|"navigates"| node_routes
node_routes -->|"selects page"| node_authpages
node_routes -->|"selects page"| node_dashboard
node_routes -->|"selects page"| node_profile
node_routes -->|"selects page"| node_userspage
node_routes -->|"selects page"| node_components
node_authpages -->|"uses state"| node_authstore
node_authstore -->|"requests auth"| node_authservice
node_authservice -->|"gets CSRF cookie"| node_sanctum
node_authservice -->|"sends auth requests"| node_web
node_authservice -->|"gets current user"| node_api
node_web -->|"routes auth"| node_fortify
node_web -->|"routes auth"| node_authcontroller
node_fortify -->|"creates users"| node_user_model
node_userspage -->|"requests records"| node_userservice
node_userservice -->|"calls endpoints"| node_api
node_api -->|"dispatches requests"| node_usercontroller
node_usercontroller -->|"delegates operations"| node_userdomain
node_userdomain -->|"reads and writes"| node_user_model
node_user_model -->|"persists records"| node_database
node_usercontroller -->|"updates avatar"| node_media
node_media -->|"stores files"| node_media_store
node_user_model -.->|"has role relations"| node_role_model
node_role_model -.->|"persists roles"| node_database
node_app -->|"reads identity"| node_authstore
node_app -->|"renders route"| node_routes

click node_routes "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/router/routes.js"
click node_app "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/App.vue"
click node_dashboard "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/dashboard/Main.vue"
click node_profile "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/profile/Main.vue"
click node_components "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/components/Main.vue"
click node_authstore "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/stores/auth.js"
click node_authservice "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/services/AuthService.ts"
click node_authpages "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/auth/login/Main.vue"
click node_fortify "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Providers/FortifyServiceProvider.php"
click node_authcontroller "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Http/Controllers/AuthController.php"
click node_userspage "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/users/Index.vue"
click node_userservice "https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/services/UserService.ts"
click node_usercontroller "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Http/Controllers/UserController.php"
click node_userdomain "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/User/UserService.php"
click node_media "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/Media/MediaService.php"
click node_role "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/Role/RoleService.php"
click node_api "https://github.com/gdarko/laravel-vue-starter/blob/main/routes/api.php"
click node_web "https://github.com/gdarko/laravel-vue-starter/blob/main/routes/web.php"
click node_user_model "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Models/User.php"
click node_role_model "https://github.com/gdarko/laravel-vue-starter/blob/main/app/Models/Role.php"
click node_sanctum "https://github.com/gdarko/laravel-vue-starter/blob/main/config/sanctum.php"
click node_media_store "https://github.com/gdarko/laravel-vue-starter/blob/main/config/filesystems.php"

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_routes,node_app,node_dashboard,node_profile,node_components,node_person toneBlue
class node_authstore,node_authservice,node_authpages,node_fortify,node_authcontroller toneAmber
class node_userspage,node_userservice,node_usercontroller,node_userdomain,node_media toneMint
class node_role,node_api,node_web,node_user_model,node_role_model,node_database,node_sanctum,node_media_store toneRose
```

## Components

### Vue SPA

- [Page routes](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/router/routes.js): `resources/app/router/routes.js`
- [SPA shell](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/App.vue): `resources/app/App.vue`
- [Dashboard](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/dashboard/Main.vue): `resources/app/views/pages/private/dashboard/Main.vue`
- [Profile settings](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/profile/Main.vue): `resources/app/views/pages/private/profile/Main.vue`
- [UI showcase](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/components/Main.vue): `resources/app/views/pages/private/components/Main.vue`

### Identity and Access

- [Auth state](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/stores/auth.js): `resources/app/stores/auth.js`
- [Auth service](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/services/AuthService.ts): `resources/app/services/AuthService.ts`
- [Sign-in and signup](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/auth/login/Main.vue): `resources/app/views/pages/auth/login/Main.vue`
- [Fortify actions](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Providers/FortifyServiceProvider.php): `app/Providers/FortifyServiceProvider.php`
- [Auth endpoints](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Http/Controllers/AuthController.php): `app/Http/Controllers/AuthController.php`

### User Operations

- [User directory](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/views/pages/private/users/Index.vue): `resources/app/views/pages/private/users/Index.vue`
- [User service](https://github.com/gdarko/laravel-vue-starter/blob/main/resources/app/services/UserService.ts): `resources/app/services/UserService.ts`
- [User endpoints](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Http/Controllers/UserController.php): `app/Http/Controllers/UserController.php`
- [User domain](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/User/UserService.php): `app/Services/User/UserService.php`
- [Avatar media](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/Media/MediaService.php): `app/Services/Media/MediaService.php`

### Laravel API

- [Role management](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Services/Role/RoleService.php): `app/Services/Role/RoleService.php`
- [API routes](https://github.com/gdarko/laravel-vue-starter/blob/main/routes/api.php): `routes/api.php`
- [Web routes](https://github.com/gdarko/laravel-vue-starter/blob/main/routes/web.php): `routes/web.php`
- [User model](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Models/User.php): `app/Models/User.php`
- [Role model](https://github.com/gdarko/laravel-vue-starter/blob/main/app/Models/Role.php): `app/Models/Role.php`
- **Application database**
- [Sanctum session auth](https://github.com/gdarko/laravel-vue-starter/blob/main/config/sanctum.php): `config/sanctum.php`
- [Media storage](https://github.com/gdarko/laravel-vue-starter/blob/main/config/filesystems.php): `config/filesystems.php`

### Other components

- **Panel user**

## Connections

- Panel user → Page routes: navigates
- Page routes → Sign-in and signup: selects page
- Page routes → Dashboard: selects page
- Page routes → Profile settings: selects page
- Page routes → User directory: selects page
- Page routes → UI showcase: selects page
- Sign-in and signup → Auth state: uses state
- Auth state → Auth service: requests auth
- Auth service → Sanctum session auth: gets CSRF cookie
- Auth service → Web routes: sends auth requests
- Auth service → API routes: gets current user
- Web routes → Fortify actions: routes auth
- Web routes → Auth endpoints: routes auth
- Fortify actions → User model: creates users
- User directory → User service: requests records
- User service → API routes: calls endpoints
- API routes → User endpoints: dispatches requests
- User endpoints → User domain: delegates operations
- User domain → User model: reads and writes
- User model → Application database: persists records
- User endpoints → Avatar media: updates avatar
- Avatar media → Media storage: stores files
- User model → Role model: has role relations
- Role model → Application database: persists roles
- SPA shell → Auth state: reads identity
- SPA shell → Page routes: renders route