feat(vue-vuetify): migrate to Vuetify 4 by darius-lesch · Pull Request #2638 · eclipsesource/jsonforms

darius-lesch · 2026-10-03T12:08:19Z

Description:
Resolves #2629.

What does this PR do?

This PR fully migrates the @jsonforms/vue-vuetify package and the @jsonforms/examples playground from Vuetify 3 to Vuetify 4.

The migration utilizes official Vuetify codemods to ensure accurate transitions for deprecated components and properties, bringing the UI into alignment with Material Design 3 while maintaining strict compatibility with the existing JSON Forms architecture.

Implementation Details

Dependency Upgrades: Bumped vuetify peer and dev dependencies to ^4.0.0 (resolving to the latest stable 4.2.3). No cascading major version bumps were required for Vite, Vitest, or Vue.
Template Codemods: Applied eslint-plugin-vuetify with the recommended-v4 ruleset across the src/ and dev/ directories. This automatically safely migrated legacy grid properties (e.g., <v-row justify="center"> to <v-row class="justify-center">) and deprecated MD2 typography classes (e.g., text-h5 to text-headline-medium).
Test Suite Resilience: Refactored a brittle unit test in CategorizationStepperRenderer.spec.ts. Replaced the hardcoded internal Vuetify 3 CSS selector (.v-stepper-item__avatar) with a robust Vue Test Utils component selector (VStepperItem), asserting both the component's internal value prop and its rendered slot text.
Snapshot Regeneration: Executed a full Vitest snapshot update to capture Vuetify 4's new internal DOM structures, including the introduction of new CSS custom properties (e.g., --v-progress-reveal-duration) and grid layout classes.

Pipeline Validation

pnpm run type-check completes with 0 errors (no TypeScript signature conflicts).
pnpm run test passes 100% with the newly generated DOM snapshots.
pnpm run build cleanly outputs all required ESM, CommonJS, UMD, and CSS artifacts.
Verified the dev playground renders correctly locally.

…62225158246 chore(vue-vuetify): upgrade vuetify to v4 and apply template codemods

…shots The CategorizationStepperRenderer spec was failing after Vuetify 4 upgrades because it relied on the internal `.v-stepper-item__avatar` CSS class which no longer exists. Replaced the brittle query with a `findAllComponents(VStepperItem)` query from Vue Test Utils. Also regenerated all the vitest snapshots in the package to align with Vuetify 4 DOM changes.

…d-snapshots-12656727703730965690 test(vue-vuetify): fix brittle stepper test and update vuetify 4 snapshots

netlify · 2026-10-03T12:08:25Z

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	`6b4bd69`
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6ad8a64f22f65ff164d6a802
😎 Deploy Preview	https://deploy-preview-2638--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coveralls · 2026-10-06T15:47:05Z

coverage: 84.795%. remained the same — darius-lesch:feat/vuetify-4-migration into eclipsesource:master

lucas-koehler

Hi @darius-lesch , thanks for the contribution ❤️
I have some comments inline, please have a look. Also please rebase onto master or merge master into your branch when doing updates.

lucas-koehler · 2026-10-16T09:44:07Z

    "maska": "^2.1.11",
    "vue": "^3.5.0",
-    "vuetify": "^3.11.0"
+    "vuetify": "^4.0.0"


This drops Vuetify 3 support for consumers, so it needs a MIGRATION.md entry under "Migration to JSON Forms 3.9". The MUI v9 upgrade (#2614) did the same for material-renderers and is a good template. Also mention the visible changes users will hit (MD3 typography, the gap-based grid, the default theme now being system) and link the Vuetify upgrade guide.

I've added a dedicated section for the Vuetify v4 upgrade under JSON Forms 3.9, explicitly calling out the MD3 typography, gap-based grid, and default system theme, along with the link to the official migration guide.

lucas-koehler · 2026-10-16T09:44:08Z

-    "eslint-plugin-vue": "^9.23.0",
+    "eslint-plugin-vue": "^9.26.0",
    "eslint-plugin-vue-scoped-css": "^2.8.0",
+    "eslint-plugin-vuetify": "^2.7.3",


eslint-plugin-vuetify isn't wired into .eslintrc.cjs, so it's an unused dev dependency after the one-off codemod run. It also pulls a second eslint-plugin-vue (10.x) into the lockfile.
I'd remove them again. We could think about adding it as a follow up but should then avoid the duplicate eslint-plugin-vue

eslint-plugin-vuetify has been removed from package.json and the lockfile is cleanly updated so we don't accidentally pull in duplicate Vue plugin versions.

lucas-koehler · 2026-10-16T09:44:09Z

    <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
      <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-medium">


The codemod picked text-headline-medium (28px) here, but the size-preserving replacement for text-h5 (24px) per the Vuetify typography migration guide's conservative mappings is text-headline-small. Same in OneOfTabRenderer.vue:43 and ArrayLayoutRenderer.vue:237. Similarly, text-h6 (20px) in ListWithDetailRenderer.vue:175 maps to text-title-large (22px), not text-headline-small (24px).

I think it makes sense to adhere to the conservative mappings to stay as close to the previous sizes as possible.

I've updated the classes across OneOfRenderer.vue, OneOfTabRenderer.vue, and ArrayLayoutRenderer.vue to text-headline-small, and ListWithDetailRenderer.vue to text-title-large. I also folded the align-self-center class and ran Prettier over the requested files to clean up the codemod formatting. Snapshots have been updated accordingly.

lucas-koehler · 2026-10-16T09:44:10Z

+    const items = stepper.findAllComponents(VStepperItem);
+
+    // 1. Verify it keeps original category values
+    expect(items.map((item) => item.props('value'))).toEqual([2, 3]);
+
+    // 2. Verify sequential visible step badges and labels via rendered text
+    expect(items[0].text()).toContain('1');
+    expect(items[0].text()).toContain('Second');
+
+    expect(items[1].text()).toContain('2');
+    expect(items[1].text()).toContain('Third');


This rewrite isn't needed. .v-stepper-item__avatar still exists in Vuetify 4 (vuetify/lib/components/VStepper/VStepperItem.js:100) and the original test passes unchanged against 4.2.3. The new version is also weaker: toContain('1') doesn't check that the badges are exactly ['1', '2']. Please revert to the original assertion if there is no good reason this needed change?

I've reverted the rewrite in CategorizationStepperRenderer.spec.ts. It's back to using the stricter .v-stepper-item__avatar assertion.

lucas-koehler · 2026-10-16T09:44:11Z


-                    <v-col
-                      align-self="center"
+                    <v-col class="align-self-center"


Prettier fails on this file now (it was clean before), and the codemod output is formatted oddly. Please run prettier on the touched files (this one, dev/components/ExampleDrawer.vue, and the long line in ListWithDetailRenderer.vue:175). Here you could also fold align-self-center into the existing :class template string instead of having both class and :class.

Prettier should succeed now.

…n between Vuetify and the Vitest/JSDOM env

* Updated `text-headline-medium` to `text-headline-small` in `OneOfRenderer.vue`, `OneOfTabRenderer.vue`, and `ArrayLayoutRenderer.vue`. * Updated `text-headline-small` to `text-title-large` in `ListWithDetailRenderer.vue`. * Folded redundant `align-self-center` class into the dynamic `:class` binding in `ArrayLayoutRenderer.vue`. * Ran Prettier on modified files and the dev example drawer component to fix formatting.

…-formatting-8773041963772504374 chore(vue-vuetify): update typography and apply prettier

Fix/pr 2638 comments v1

darius-lesch and others added 6 commits October 2, 2026 21:22

chore(vue-vuetify): upgrade vuetify to v4 and apply template codemods

57ae550

Merge pull request #7 from darius-lesch/vuetify-v4-codemods-147767863…

3e4a8de

…62225158246 chore(vue-vuetify): upgrade vuetify to v4 and apply template codemods

Added missing component import

2913001

Regenerated the snapshots

648277f

Merge pull request #8 from darius-lesch/fix/vuetify-4-stepper-test-an…

2ac758d

…d-snapshots-12656727703730965690 test(vue-vuetify): fix brittle stepper test and update vuetify 4 snapshots

darius-lesch mentioned this pull request Oct 3, 2026

Update to Vuetify 4 #2629

Open

lucas-koehler mentioned this pull request Oct 16, 2026

update to vuetify 4.1.8 #2649

Draft

lucas-koehler self-requested a review October 16, 2026 09:37

lucas-koehler requested changes Oct 16, 2026

View reviewed changes

darius-lesch and others added 14 commits October 16, 2026 14:11

Merge branch 'eclipsesource:master' into feat/vuetify-4-migration

8461709

fix: resolved issues raised by

8033550

chore: added notes for migration from Vuetify 3 to 4

06d678e

chore: remove unused ESLint plugin

bbecaa9

fix: revert stepper avatar unit test

96aab22

fix: updated snapshot due to failint test

bf73e39

fix: cleanup component state to fix failing test due to race conditio…

7144192

…n between Vuetify and the Vitest/JSDOM env

Merge pull request #20 from darius-lesch/chore/vue-vuetify-typography…

bdcd457

…-formatting-8773041963772504374 chore(vue-vuetify): update typography and apply prettier

chore: merge master into working branch

c3d5bc1

Merge pull request #22 from darius-lesch/fix/pr-2638-comments-v1

9c46a98

Fix/pr 2638 comments v1

fix: resolve the unintended scope creep

2542ca5

fix: restore pnpm-lock.yaml

fc9aaf4

chore: strictly bump vuetify to v4 without side effects

04e1e4a

darius-lesch requested a review from lucas-koehler October 17, 2026 21:00

darius-lesch added 2 commits October 19, 2026 13:32

Merge branch 'master' into feat/vuetify-4-migration

adf7c56

Merge branch 'master' into feat/vuetify-4-migration

6b4bd69

Conversation

darius-lesch commented Oct 3, 2026

What does this PR do?

Implementation Details

Pipeline Validation

Uh oh!

netlify Bot commented Oct 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jsonforms-examples ready!

Uh oh!

coveralls commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Oct 3, 2026 •

edited

Loading

coveralls commented Oct 6, 2026 •

edited

Loading