Front-End Structure

Enforce a three-layer architecture: Vue components handle UI only, Pinia stores hold state via ref/computed with synchronous setters, and services manage all API calls. This separation keeps concerns isolated and maintains automatic reactivity across your view-service-store flow.

Yes. Services should handle all API calls and update stores afterward. Stores hold state exclusively; services use transport types to build type-safe requests, keeping business logic separate and preventing reactivity issues from mixed concerns.

Services call APIs and invoke store actions that update state via ref/computed with synchronous setters. This pattern ensures UI reactivity updates automatically as services complete requests, eliminating manual state synchronization.

Transport types belong in services, not components. Services build all requests using transport types to enforce type safety and isolate API concerns. Components receive only UI-ready data from stores, keeping the architecture clean.

Services catch errors, optionally update store state, and handle logging or retry logic. Stores remain data holders; services orchestrate all side effects. This keeps reactivity predictable and stores focused on state representation only.