# Frontend - AI Context

## Tech Stack

- **Framework**: Nuxt 4.2.0
- **UI Library**: Nuxt UI 4.3.0 (built on Vue 3)
- **State Management**: Pinia
- **Language**: TypeScript
- **i18n**: Multilingual support (de/en)
- **Auth**: nuxt-auth-utils (OAuth2/JWT integration)
- **API Client**: Auto-generated from OpenAPI spec

---

## Composables

| Composable                    | Purpose                                  |
| ----------------------------- | ---------------------------------------- |
| `useFormElementVisibility`    | Evaluate visibility conditions           |
| `useSectionSpawning`          | Process spawn triggers, clone templates  |
| `useClonableElements`         | Clone elements with reference generation |
| `useFormElementValueClearing` | Clear values when elements become hidden |
| `useTableCrossReferences`     | Resolve table column/row references      |
| `useApplicationFormValidator` | Form validation rules                    |
| `useLogger`                   | Consola logger instance                  |

---

## Development

```bash
# Install dependencies
pnpm install

# Run dev server (port 3001)
pnpm run dev

# Build for production
pnpm run build

# Generate API client (after OpenAPI spec changes)
pnpm run api:generate
```

---

## Key Files

| File              | Purpose                        |
| ----------------- | ------------------------------ |
| `composables/`    | Reusable composition functions |
| `locales/de.json` | German translations            |
| `locales/en.json` | English translations           |
| `stores/`         | Pinia state stores             |
| `pages/`          | Nuxt page components           |
| `components/`     | Vue components                 |

---

## Rules for AI

1. **No hardcoded UI strings** - Always use i18n. Add keys to both `de.json` and `en.json`
2. **Nuxt UI 4** - For any UI-related questions, use the Nuxt UI MCP server to get current component docs and examples
3. **Type safety** - Leverage TypeScript for all components and composables
4. **Composables pattern** - Use composables for shared logic (visibility, spawning, validation, etc.)
5. **VueUse first** - Prefer composables from [VueUse](https://vueuse.org/) over custom implementations when available. Check VueUse before writing custom utility composables. Use context7 to learn more about the available composables.
6. **State management** - Use Pinia stores for cross-component state
7. **API client** - Never manually write API calls. Use auto-generated client from OpenAPI spec

### Component Guidelines

- Keep components focused and single-responsibility
- Extract complex logic into composables
- Use TypeScript interfaces for props and emits
- Follow Vue 3 Composition API patterns
- Use Nuxt UI components for consistent design

### i18n Best Practices

- Use semantic keys: `form.submit`, `error.validation.required`
- Never skip German translations (primary language)
- Keep English translations synchronized
- Use interpolation for dynamic values: `{count}`, `{name}`