Frontend How-To Guides

Task-oriented walkthroughs for common frontend changes in the Nuxt 3 app (cpr-frontend). For tasks in the Inertia admin panel (lives inside cpr-backend), see the backend admin guides instead.

API & Services

• Add an API service method — service class, types, error handling
• Consume a paginated typeahead — MappingTargetSelect pattern with debounced search
• Handle the branch context header — X-Branch-Id and how it's set

Forms

• Build a reactive form with validation — useForm composable, UiInput, UiSelect, server-error binding
• Submit a form with file upload — POST instead of spoofed PUT (memory: update-route-post-vs-spoofed-put)
• Confirm + toast pattern for destructive actions — ConfirmDialog + vue-sonner

State

• Add a Pinia store — store layout, actions vs getters, hydration

Permissions

• Gate UI by permission — useCanAccess() / $can() in Nuxt vs Inertia

Verification

• Verify a UI change end-to-end — what to check before declaring done (no JS test runner in this project)