refactor(ui): migrate to Vuetify 4, Vue Router 5 and Vite 8#57
Merged
Conversation
- Vuetify 3 -> 4 via @data-fair/lib-vuetify v2 (drop local vuetify-settings.scss, use lib-vuetify global.scss + settingsPath) - Vue Router 4 -> 5 (drop unplugin-vue-router, use vue-router/vite + VueRouterAutoImports, dts route-map.d.ts) - Vite 6 -> 8 (@vitejs/plugin-vue 6, vite-plugin-node-polyfills 0.28, drop experimentalMinChunkSize) - update all UI deps (vjsf 4, intlify 11, vueuse 13, ...) - eslint flat/base for vue + vuetify (official eslint-plugin-vuetify) - gitignore generated dts files - add @types/express (no longer pulled transitively by lib-express) - pin @data-fair/lib-types-builder to 1.10.1 (>=1.11 regresses on the OpenAPI 3.1 schema: $ref-as-property crashes makeLocalDefs) - node 22 -> 24 (.nvmrc, Dockerfile), bump GitHub Actions (checkout v5, setup-node v5) - run unit tests in the quality gate
The Vuetify 4 migration required no component changes: build, type-check, lint and e2e all pass unchanged, and the visual snapshot diff vs the v3 baseline is ~1% (sub-pixel font metrics in v-list-item labels, no layout/component break). Only the petstore e2e was flaky because its spec is fetched from the external petstore.swagger.io on a cold start, so bump the load timeout.
Dev-only page (excluded from the production build like dev.vue) that embeds openapi-viewer in a <d-frame> with the same load parameters data-fair uses (drawerLocation=right, resize=no, sync-params, emit-iframe-messages, state-change-adapter), with a petstore/example toggle.
The Docker installer and the quality workflow used '--omit=optional --omit=peer' (and a vite-6-era @rollup/rollup-linux-x64 workaround). With Vite 8 + the regenerated lockfile this broke the build: - '--omit=peer' pruned ajv (hoisted as peer:true) -> build-types could not find 'ajv' (ERR_MODULE_NOT_FOUND from lib-types-builder) - '--omit=optional' would also prune rolldown's native binary needed by Vite 8 Use 'npm ci --omit=dev' in the Dockerfile installer and plain 'npm ci' in the quality workflow, matching catalogs. Verified by building the Docker image.
express is hoisted as peer:true in the lockfile, so --omit=peer pruned it from the production api node_modules -> 'Cannot find package express' at runtime. Match catalogs: 'npm ci -w api --omit=dev --omit=optional' (no --omit=peer). Verified by running the built image.
- restaure les classes typographiques supprimées en v4 (text-h6 -> text-title-large, text-body-2 -> text-body-medium, text-caption -> text-body-small, text-h4 -> text-headline-large) - chips des codes de réponse: flat (sélectionné) / outlined (sinon) - chip de statut de réponse sans élévation (flat) - badge de méthode HTTP en span coloré au lieu d'un v-chip - i18n: traductions manquantes + regroupement des erreurs sous errors.*
Affiche un v-skeleton-loader pendant le fetch/dereferencing de la documentation, au lieu d'une page blanche tant qu'elle n'est pas prête.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Modernizes the UI stack and adds an automated test harness.
What changed
vue-router/viteplugin, droppingunplugin-vue-router), Vite 6 → 8, vjsf 3 → 4, Node 22 → 24, and refreshed@data-fair/*libs (lib-vuetify 1.x → 2.x, etc.).text-h6→text-title-large,text-caption→text-body-small…), chip variant updates (elevated/tonal→flat/outlined), and i18n for previously hard-coded strings.vuetify-settings.scssworkaround in favour of@data-fair/lib-vuetify/style/global.scss, now that lib-vuetify 2.x ships the Vuetify 4 conventions.unit(pure functions, runs in CI),e2e(behavioural, committed but not run in CI),snapshot(visual, local-only and gitignored). Documented inCONTRIBUTING.md.dts/typings removed from git and gitignored; CI/Dockerfile install steps realigned with the new dependency tree.Why
Bring the project onto the current Vuetify 4 / data-fair lib generation, and put a test safety net in place to support this and future upgrades.
Regression risks
ui/src/main.ts: the removedvuetify-settings.scsscarried the--v-medium-emphasis-opacity: 1fix for prepended list icons (vuetify#18760). Confirm lib-vuetify 2.x'sglobal.scssreproduces it, otherwise list icons may regain unwanted opacity.operation.vue: HTTP method rendering changed from<v-chip>to a styled<span>— verify the intended look.uibuildno longer runsvue-tsc -b(nowvite buildonly); type-checking is still covered bycheck-typesinquality.--omit=peer/--omit=optional): confirm the production build installs cleanly.