Architecture

Repository map

Location	Responsibility
app/pages/	File-based application routes and role-specific screens
app/layouts/	Shared page shells
app/components/	Feature components and the ui/ component library
app/composables/	Reusable logic, resource operations, and domain-specific workflows
app/stores/	Pinia authentication and sidebar state
app/middleware/	Authentication, guest access, and role checks
app/plugins/	Server authentication initialization and client validation
app/shared/types/	Shared TypeScript contracts
app/shared/config/	Route, feature, and presentation configuration
app/assets/css/	Base styles and design tokens
server/api/	Nuxt server endpoints used by the frontend
server/utils/	Backend SDK, API transport, validation, and upload helpers
i18n/locales/	Dutch and English translation files, grouped by domain
test/	Unit, Nuxt component/composable, and browser tests
docs/	This VitePress site and existing project references

Request flow

The typical flow is:

Page / component
  → composable
  → Nuxt server endpoint (server/api)
  → ApiSdk domain service (server/utils/api)
  → ApiClient
  → configured backend (NUXT_API_BASE)

server/utils/apiSdk.ts groups services for members, invoices, payments, documents, and other domains. server/utils/apiClient.ts handles API requests and response normalization, including snake_case/camelCase conversion. Reuse these layers when extending a feature.

Authentication and roles

Authentication state lives in app/stores/auth.ts. Global middleware handles authentication and checks a page's requiresRole metadata. A role mismatch redirects an authenticated user to their own dashboard. Server authentication initialization is in app/plugins/auth.server.ts.

See the product feature handover for the role-based workspaces and supported workflows.

Styling and localization

Use the shared UI components and CSS tokens in app/assets/css/tokens.css. The hex-color check rejects raw hex values in application Vue/CSS files outside the token file.

Translations are organized by domain under i18n/locales/en/ and i18n/locales/nl/. The locale strategy does not add a language prefix to routes. nuxt.config.ts selects English only when NUXT_PUBLIC_DEFAULT_LOCALE=en; otherwise it defaults to Dutch.

Development-only screens

The /ui/* component gallery and /__tokens token page are development tools. The production page hook in nuxt.config.ts removes them from production builds.