---

description: Vue frontend — components, composables, Vuetify, tests, accessibility, and i18n globs: src/renderer/**/*.vue alwaysApply: false

Vue Frontend

Components and logic

• New components exclusively with <script setup lang="ts">.
• No business logic in templates — no calculations, API calls, or complex conditions. Templates bind state and events from script/composable.
• Logic belongs in composables (model/use-*.ts) or service/ — UI components in ui/ stay presentation-focused.
• Vuetify 3 components for UI (v-btn, v-card, v-text-field, …); icons via @mdi/js.
• Layer assignment per architecture-fsd.md.

<!-- ❌ Business logic in template -->
<v-btn :disabled="email.length < 5 || !isOnline" @click="signUp(email, password)">

<!-- ✅ Composable provides ready state -->
<v-btn :disabled="!canSubmit" :loading="loading" @click="submit">

Internationalization

• Supported languages: German and English.
• No hardcoded UI strings — text via useTranslation() and slice i18n/keys.ts.
• ARIA labels and visible text also via i18n keys.

Slice layout (per use case under features/<feature>/<slice>/i18n/):

i18n/
  keys.ts    # translation key paths for components
  de.ts      # German strings (single file)
  en.ts      # English strings (single file)
  index.ts   # re-exports de/en for parent feature aggregation

• One de.ts and one en.ts per slice — no language subfolders (de/, en/) and no extra topic files (e.g. cloud.ts, legal.ts). Nested objects inside de.ts/en.ts are fine when the UI has logical groups (same pattern as set-theme tooltip).
• Parent feature bundles slice messages in features/<feature>/i18n/de.ts and en.ts (e.g. diagnostics: manageDiagnosticsUploadDe).
• keys.ts paths must match the nested structure registered in the parent feature i18n.

Responsive design

• Layouts with Vuetify grid (v-container, v-row, v-col) and breakpoints (cols, md, lg, …).
• useDisplay() from Vuetify for device-specific logic (e.g. mobile vs. desktop).
• Test components on mobile, tablet, and desktop — no fixed pixel widths for core layouts.

Accessibility (a11y)

• Aim for Lighthouse Accessibility score (no regressions).
• Set meaningful ARIA attributes: aria-label, aria-labelledby, role, aria-live for dynamic content.
• Interactive elements must be keyboard reachable; keep focus visible.
• Forms: <label> or aria-label/aria-labelledby for every input.
• Decorative icons: aria-hidden="true"; icon-only buttons: descriptive aria-label.
• Error/status messages: accessible to screen readers (role="alert" or aria-live="polite").

Tests per UI component (required on creation)

When adding a new .vue file under any ui/ folder (features/, pages/, widgets/, shared/ui/), add both spec files in the same change — not as a later follow-up:

| File | Purpose | | -------------------- | ------------------------------------------------------- | | <Name>.stories.ts | Storybook — isolated display, variants | | <Name>.e2e.spec.ts | Playwright — critical interactions and visible behavior |

Every existing UI component in ui/ must also keep both files when touched.

Storybook convention:

• title by layer: Features/<Feature>/<Name>, Pages/<Page>/<Name>, Shared/UI/<Name>, Widgets/<Name>/<Name>
• @storybook/vue3-vite, satisfies Meta<typeof Component>

Playwright convention:

• @playwright/test, descriptive test.describe('<ComponentName>')
• Prefer meaningful selectors: getByRole, getByLabel, getByText — no fragile CSS chains
• i18n setup via @shared/tests/e2e/setup-language where needed

Lighthouse

New and changed UI should meet Lighthouse requirements, especially:

• Accessibility — ARIA, contrast, semantic HTML
• Best Practices — valid HTML structure, no deprecated APIs
• Performance — no unnecessary re-renders, lazy loading where appropriate

For Storybook or page changes, verify visually and with Lighthouse before marking complete.

Completion checklist

After UI work, run and fix errors:

1. npm run lint:fix
2. npm run type:check
3. npm run format:fix
4. npm run test:coverage (affected unit tests)
5. Playwright for new/changed .e2e.spec.ts
6. Storybook for new/changed .stories.ts