85 lines
3.1 KiB
Markdown
85 lines
3.1 KiB
Markdown
# 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
|
|
- API calls are wrapped in composables or Pinia actions. The `/composables/applicationFormTemplate` are a good reference.
|
|
|
|
### 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}`
|