PrimeVue 4 upgrade

[alexlanderzander]

Prime Vue 3 is depreciated
needs to be updated to Prime Vue 4

[tiiptaptoe]

Create a branch
feat/upgrade/primevue-4, do the dependency bump there, fix breakages, run tests, then open a draft PR referencing this issue. Deploy to staging and run manual + automated UI checks before releasing to production.

checklist:

Gather baseline info

•     Note current versions: run cat package.json or npm ls primevue vue primeicons.
  

•     Record failing tests (if any) before changes so you can compare.
  

  Read official resources

•     Find and read the PrimeVue v4 migration guide and changelog; copy relevant notes into the PR/issue.
  

  Create feature branch

•     Branch name: feat/upgrade/primevue-4
  

•     Open a draft PR linking this issue and include the checklist below.
  

  Bump dependencies

•     Update package.json: upgrade primevue to v4, update primeicons / theme packages and other related packages if required.
  

•     Ensure Vue and build-tool compatibility (verify required Vue version for PrimeVue v4).
  

  Install & run CI locally

•     npm install (or pnpm/yarn), run linters and unit tests: npm test, npm run lint.
  

•     Fix lint/test failures introduced by the upgrade.
  

  Address breaking changes

•     Grep/search the codebase for PrimeVue component usage and props/events that the migration guide lists as changed.
  

•     Update imports, props, events, slot names, CSS classes, component names, or API usage as required.
  

•     Update theme CSS import paths (PrimeVue themes sometimes change import paths/structure).
  

  UI verification

•     Run the dev server and manually exercise pages/components using PrimeVue controls (forms, dialogs, datatable, menus, ).
  

•     Capture screenshots of critical screens pre/post upgrade for comparison.
  

  Update automated tests

•     Adjust unit/component tests and end-to-end tests to match new behaviors or selectors.
  

•     Run e2e test suite (Cypress) and fix flakiness introduced by markup/DOM changes.
  

  CI and staging

•     Ensure CI pipeline passes (tests + build).
  

•     Deploy the branch to a staging environment and run a smoke test checklist.
  

  PR checklist & documentation

  In PR description include:

•     Summary of change and why (link to migration guide)
  

•     List of changed files / components updated
  

•     Test results and screenshots
  

•     Any known issues or follow-ups
  

• Add/Update README or docs if component usage changed for developers.
  

Release and rollback

Merge to main after staging signoff and passing CI.
Monitor production after release (errors, Sentry, logs).
Rollback plan: revert the dependency commit or use the package lockfile to pin to previous PrimeVue version and redeploy.

Suggested sub-tasks / issues to create

• Bump primevue & primeicons (dependency change)
  

• Fix broken components (one PR per large page/component if needed)
  

• Update theme/CSS and global imports
  

• Update unit tests
  

• Update e2e tests & smoke tests
  

• Staging deploy + manual QA
  

Labels, assignees, priority, estimate

• Labels: breaking-change, dependency, needs-review, needs-testing
  

• Assignee: developer familiar with UI components / most recent PrimeVue work
  

• Priority: medium/high (depends on how many components use PrimeVue)
  

• Estimate: 1–3 days for small apps, 1–2 weeks for larger apps with heavy PrimeVue usage
  

Checklist you can paste into the issue / PR

• [ ]
• Record current versions & test baseline
• Read migration guide & paste links
• Create branch feat/upgrade/primevue-4
• Upgrade dependencies and run install
• Fix lint and unit test failures
• Update components for breaking changes
• Update themes/CSS imports
• Update unit/e2e tests
• Deploy to staging and QA
• Merge and monitor production
• Close issue and add release notes