e5e0be57da
- Nuxt 3 CSR (ssr:false), @nuxtjs/tailwindcss, dev proxy to backend - useAuth composable: CSRF cookie, XSRF token, login/logout/fetchUser - auth middleware: redirects to /login if no session - Login page, client list with search + create modal - Client detail with editable name, dynamic notes (JSON), history feed - History form with type select, inline edit/delete per entry - Print layout at /clients/:id/print (calls window.print on mount) - TypeScript interfaces: User, Client, HistoryEntry, PaginatedResponse - German UI labels throughout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
1.2 KiB
Markdown
34 lines
1.2 KiB
Markdown
# Frontend — Nuxt 3 CSR
|
|
|
|
## Structure
|
|
- `pages/` — file-based routing (CSR only, all behind auth middleware)
|
|
- `composables/useAuth.ts` — login/logout/user state (singleton via useState)
|
|
- `composables/useClient.ts` — CRUD + list
|
|
- `composables/useHistory.ts` — history entry CRUD per client
|
|
- `components/client/` — ClientCard, ClientFields
|
|
- `components/history/` — HistoryEntry, HistoryForm
|
|
- `middleware/auth.ts` — redirects to /login if no session
|
|
- `types/index.ts` — shared TypeScript interfaces
|
|
|
|
## Auth flow
|
|
1. `GET /sanctum/csrf-cookie` sets XSRF-TOKEN cookie
|
|
2. `POST /api/login` with credentials — Laravel sets session cookie
|
|
3. All subsequent requests: include both cookies via `credentials: 'include'`
|
|
4. XSRF-TOKEN decoded and sent as `X-XSRF-TOKEN` header on mutating requests
|
|
|
|
## API calls
|
|
Always use the `useApiFetch` composable pattern:
|
|
```ts
|
|
const data = await $fetch('/api/clients', { credentials: 'include' })
|
|
```
|
|
|
|
## Tailwind
|
|
Desktop-first, no mobile breakpoints in MVP.
|
|
Dense, data-focused UI — think DATEV/Outlook aesthetics.
|
|
|
|
## Commands
|
|
```
|
|
npm run dev # dev server on :3000
|
|
npm run build # production build
|
|
npm run typecheck
|
|
```
|