gremiumhub/legalconsenthub/CLAUDE.md

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

# 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 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}