35 lines
1.2 KiB
Markdown
35 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
|
||
|
|
```
|