apps/app/src/plugins/primevue/defaults.ts

@@ -0,0 +1,12 @@
+// Global PrimeVue PassThrough (pt) defaults. F3 ships this scaffold
+// empty — F4 sub-packages will populate component-level defaults as
+// each Vuetify surface migrates and we discover which props need
+// consistent overrides (analogous to Vuetify's defaults registry at
+// apps/app/src/plugins/vuetify/defaults.ts).
+//
+// Per RFC §6 + AD-1, this object is consumed by the PrimeVue install
+// call in ./index.ts via the `pt` config option.
+
+export const ptDefaults = {} as const
+
+export default ptDefaults

apps/app/src/plugins/primevue/index.ts

@@ -0,0 +1,36 @@
+// PrimeVue plugin installer. Registers PrimeVue with the Crewli Aura
+// preset (theme.ts), the Dutch locale (primelocale/nl), and the three
+// service modules (Toast, Confirmation, Dialog) the SPA mounts at
+// App.vue top level.
+//
+// Per RFC-WS-FRONTEND-PRIMEVUE AD-2: darkModeSelector matches Vuexy's
+// `.dark` class convention so existing skin-toggle plumbing continues
+// to work during the F3–F6 parallel-mode window.
+
+import type { App } from 'vue'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import DialogService from 'primevue/dialogservice'
+import ToastService from 'primevue/toastservice'
+import nl from 'primelocale/nl.json'
+
+import { CrewliPreset } from './theme'
+import { ptDefaults } from './defaults'
+
+export default function installPrimeVue(app: App) {
+  app.use(PrimeVue, {
+    theme: {
+      preset: CrewliPreset,
+      options: {
+        darkModeSelector: '.dark',
+        cssLayer: false,
+      },
+    },
+    locale: nl.nl,
+    pt: ptDefaults,
+  })
+
+  app.use(ToastService)
+  app.use(ConfirmationService)
+  app.use(DialogService)
+}

apps/app/src/plugins/primevue/theme.ts

@@ -0,0 +1,55 @@
+// Crewli Aura preset. Token values per RFC-WS-FRONTEND-PRIMEVUE Appendix B.
+//
+// Primary palette derives from Crewli teal #0D9394 (light primary) and
+// #0B7F80 (dark primary) — the same values the Vuetify side uses at
+// apps/app/src/plugins/vuetify/theme.ts. The two themes are intentionally
+// kept in lockstep during the F3–F6 parallel-mode window so that pages
+// in either framework render with identical brand color.
+//
+// Imports use @primeuix/themes (PrimeVue 4's officially documented theme
+// package, per primevue.org/vite/), substituting RFC v1.0's reference to
+// the deprecated @primevue/themes. See B1 commit for rationale.
+
+import { definePreset } from '@primeuix/themes'
+import Aura from '@primeuix/themes/aura'
+
+export const staticPrimaryColor = '#0D9394'
+export const staticPrimaryDarkenColor = '#0B7F80'
+
+export const CrewliPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '#E6F4F4',
+      100: '#CCE9EA',
+      200: '#99D3D4',
+      300: '#66BDBE',
+      400: '#33A7A8',
+      500: '#0D9394',
+      600: '#0B7F80',
+      700: '#086B6C',
+      800: '#055758',
+      900: '#034344',
+      950: '#012F30',
+    },
+    colorScheme: {
+      light: {
+        primary: {
+          color: '{primary.500}',
+          contrastColor: '#ffffff',
+          hoverColor: '{primary.600}',
+          activeColor: '{primary.700}',
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.400}',
+          contrastColor: '{surface.900}',
+          hoverColor: '{primary.300}',
+          activeColor: '{primary.200}',
+        },
+      },
+    },
+  },
+})
+
+export default CrewliPreset