How abdallah01win/starterapp works
StarterApp is a Vue SaaS starter kit whose main user workflow is sign-in, session initialization and guarded navigation into dashboard or user-management pages. Those pages sit within a shared application layout and can use reusable forms, tables and UI primitives. The repository also provides API access, permissions, notifications, localization, theming and profile features. The graph reflects README capabilities and sampled wiring; page internals and several integrations are represented only at their supported directory or module paths.
Main entry points: index.ts Router · authStore.ts Auth store · main.ts App bootstrap · App.vue App shell
Components 22
Application shell
- App bootstrap
src/main.ts - App shell
src/App.vue - App layout
src/layouts/AppLayout.vue - Router
src/router/index.ts
Identity and access
- Sign-in page
src/pages/index.vue - Auth guard
src/router/middleware/authentication.ts - Permission guard
src/router/middleware/permissions.ts - Auth store
src/stores/authStore.ts - Session cookie
Application features
- Dashboard
src/pages/dashboard/index.vue - User management
src/pages/users/index.vue - Profile
src/pages/profile/index.vue - Feature stores
src/stores/userStore.ts
Shared foundation
- HTTP client
src/plugins/axios.ts - Notifications
src/stores/notificationStore.ts - Domain components
src/components - UI primitives
src/components/ui - Localization
src/plugins/i18n.ts - Color mode
src/plugins/colorMode.ts - Toast display
src/components/ui/sonner/Sonner.vue
Other components
- User
- API service
Connections 26
- User → Sign-in page: submits credentials
- App bootstrap → App shell: mounts
- App bootstrap → Router: installs
- App bootstrap → Localization: installs
- App bootstrap → Color mode: provides theme
- App shell → App layout: renders
- App shell → Router: renders routes
- Router → Auth guard: checks session
- Router → Permission guard: checks access
- Router → Sign-in page: dispatches route
- Router → Dashboard: dispatches route
- Router → User management: dispatches route
- Router → Profile: dispatches route
- Sign-in page → Auth store: calls login
- Auth guard → Auth store: initializes session
- Auth store → HTTP client: sends requests
- HTTP client → API service: HTTP requests
- Auth store → Session cookie: reads/writes token
- Auth store → Router: redirects
- Auth store → Notifications: sets notifications
- Dashboard → Domain components: uses
- User management → Domain components: uses
- Profile → Domain components: uses
- Domain components → UI primitives: composes
- App shell → Toast display: renders toaster
- App bootstrap → Notifications: initializes store system