Skip to content

refactor(ui): migrate to Vuetify 4 and Vue Router 5#80

Merged
albanm merged 4 commits intomasterfrom
vuetify-v4
Apr 14, 2026
Merged

refactor(ui): migrate to Vuetify 4 and Vue Router 5#80
albanm merged 4 commits intomasterfrom
vuetify-v4

Conversation

@BatLeDev
Copy link
Copy Markdown
Member

Summary

  • Migrate UI to Vuetify 4, Vue Router 5, and Vite 8
  • Update all shared dependencies to latest versions
  • Bug fixes and i18n improvements

Changes

  • Vuetify 4: Upgrade from v3 to v4 with @data-fair/lib-vuetify v2, apply all breaking changes, and declare CSS layer order in index.html to avoid the reset layer overriding components in production builds
  • Vue Router 5: Migrate to v5 with file-based routing (vue-router/vite + vue-router/unplugin), drop unplugin-vue-router
  • Vite 8: Upgrade build tooling, drop legacy rollup experimentalMinChunkSize option
  • Node 24: Update runtime, remove deprecated flags
  • i18n: Replace hardcoded French strings with translations across processing/run components and pages
  • Dependencies: Align all shared deps across data-fair services (lib-vue, lib-vuetify, lib-utils, vjsf v4, frame, vueuse, sass-embedded…)
  • Cleanup: Drop unused deps (@koumoul/v-iframe, iframe-resizer, unplugin-fonts, vue-tsc)

Major refactor to upgrade the UI stack and dependencies to latest versions:

- **Vuetify 4**: Upgrade `@data-fair/lib-vuetify` from v1.13.0 to v2.0.5
  and add explicit `vuetify` v4.0.3 dependency
- **Vue Router 5**: Migrate from v4.4.5 to v5.0.3, use `vue-router/vite`
  plugin and `VueRouterAutoImports`
- **Vite 8**: Upgrade from v6.3.5 to v8.0.2
- **Remove v-iframe**: Remove `@koumoul/v-iframe` and `iframe-resizer`
  dependencies and related code
- **Remove child-process-promise**: Replace with native `node:child_process`
  in worker
- **Dependencies**: Update all `@data-fair/lib-*` packages, express, mongodb,
  nodemailer, vjsf, vue-i18n, and other deps
- **ESLint**: Update config for Vuetify 4 compatibility (flat/base)
- **CI**: Upgrade to actions/checkout@v5, actions/setup-node@v5, simplify
  install step
- **Config**: Remove `config.util.makeImmutable` calls, separate type imports
- **i18n**: Add i18n translations in processings-actions component
- **UI fixes**: Adapt components for Vuetify 4 API changes (typography
  classes, removed props, SearchField component)
Add component-level i18n blocks with en/fr translations across all Vue
components that had hardcoded text, and add missing English translations
to the plugins admin page.
…mponents

In production builds, Vite splits component CSS into separate chunks loaded
before the entry CSS. Without an upfront @layer declaration, the
vuetify-core.reset layer ends up registered after vuetify-components, inverting
the intended cascade and causing tabs, header icons and breadcrumb padding to
render incorrectly. Same fix as in the agents project.
@BatLeDev BatLeDev requested a review from albanm April 14, 2026 08:15
@albanm albanm merged commit eb5c3f8 into master Apr 14, 2026
3 checks passed
@albanm albanm deleted the vuetify-v4 branch April 14, 2026 08:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants