lucas-koehler · Oct 26, 2026 · Oct 2, 2026 · Oct 3, 2026 · Oct 3, 2026 · Oct 3, 2026
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -49,6 +49,19 @@ If you apply custom styling that relies on the previous `Grid`-based DOM structu
 Furthermore, if you use exported method `renderLayoutElements`, it no longer wraps children in `Grid` items for direction `column`.
 This should not affect you except if you explicitly use this method in custom renderers.
 
+### Vue Vuetify renderers now require Vuetify v4
+
+The Vue Vuetify renderers (`@jsonforms/vue-vuetify`) were upgraded from Vuetify 3 to Vuetify 4. When using JSON Forms 3.9, your application now needs to provide `vuetify` in version 4.
+
+To upgrade your application, follow the official [Vuetify upgrade guide](https://vuetifyjs.com/en/getting-started/upgrade-guide/).
+
+Use JSON Forms 3.8 if you need to stay on Vuetify 3.
+
+As part of this upgrade, you may notice several visible changes due to Vuetify 4's updated design specifications:
+* Typography has been updated to Material Design 3 (MD3) specifications.
+* The grid system is now gap-based.
+* The default theme is now `system` instead of `light`.
+
 ## Migrating to JSON Forms 3.8
 
 ### `Translator` type changed from overloaded signatures to a generic conditional type

diff --git a/packages/vue-vuetify/dev/components/ExampleAppBar.vue b/packages/vue-vuetify/dev/components/ExampleAppBar.vue
@@ -14,15 +14,15 @@ const appStore = useAppStore();
     />
     <v-toolbar-title>
       <v-container fill-height fluid
-        ><v-row align="center" justify="center" dense>
+        ><v-row class="align-center justify-center" density="compact">
           <JsonFormsLogo width="40" height="40"></JsonFormsLogo>
           <v-col>JSON Forms </v-col>
         </v-row>
       </v-container>
     </v-toolbar-title>
     <v-toolbar-items>
       <v-container fill-height fluid justify-end
-        ><v-row dense>
+        ><v-row density="compact">
           <v-col>
             <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">

diff --git a/packages/vue-vuetify/dev/components/ExampleDrawer.vue b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
@@ -29,7 +29,9 @@ const filteredExamples = computed(() => {
       <template v-slot:prepend>
         <VuetifyLogo width="40" height="40" />
       </template>
-      <v-list-item-title class="text-h6"> Examples </v-list-item-title>
+      <v-list-item-title class="text-title-large">
+        Examples
+      </v-list-item-title>
       <v-list-item-subtitle> Vuetify Renderers </v-list-item-subtitle>
     </v-list-item>
 

diff --git a/packages/vue-vuetify/dev/components/ExampleForm.vue b/packages/vue-vuetify/dev/components/ExampleForm.vue
@@ -110,11 +110,9 @@ const properties = computed<JsonFormsProps>(() => ({
     <v-container v-else>
       <v-row
         v-if="!resolvedSchema.resolved"
-        class="fill-height"
-        align-content="center"
-        justify="center"
+        class="fill-height align-content-center justify-center"
       >
-        <v-col class="text-subtitle-1 text-center" cols="12">
+        <v-col class="text-body-large text-center" cols="12">
           Resolving Schema Refs
         </v-col>
         <v-col cols="6">
@@ -127,11 +125,9 @@ const properties = computed<JsonFormsProps>(() => ({
       </v-row>
       <v-row
         v-else-if="resolvedSchema.error !== undefined"
-        class="fill-height"
-        align-content="center"
-        justify="center"
+        class="fill-height align-content-center justify-center"
       >
-        <v-col class="text-subtitle-1 text-center" cols="12">
+        <v-col class="text-body-large text-center" cols="12">
           <v-alert color="red" dark>
             {{ resolvedSchema.error }}
           </v-alert>

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^3.11.0"
+    "vuetify": "^4.3.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -114,11 +114,11 @@
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-static-copy": "^2.3.2",
-    "vite-plugin-vuetify": "^2.1.1",
+    "vite-plugin-vuetify": "^2.1.3",
     "vitest": "^1.4.0",
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.2.0",
-    "vuetify": "^3.12.8"
+    "vuetify": "^4.3.0"
   }
 }
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -125,8 +125,7 @@
                         class="ma-0"
                         :aria-label="control.translations.downAriaLabel"
                         :disabled="
-                          index >= dataLength - 1 ||
-                          !isControlEditable(control)
+                          index >= dataLength - 1 || !isControlEditable(control)
                         "
                         :class="styles.listWithDetail.itemMoveDown"
                         @click="moveDownClick($event, index)"
@@ -172,7 +171,9 @@
         </v-list>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="flex-grow-1">
-        <span class="text-h6">{{ control.translations.noSelection }}</span>
+        <span class="text-title-large">{{
+          control.translations.noSelection
+        }}</span>
       </v-col>
       <v-col
         v-else

diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -50,7 +50,7 @@
     </v-card-title>
     <v-card-text v-bind="vuetifyProps('v-card-text')">
       <v-container justify-space-around align-content-center>
-        <v-row justify="center">
+        <v-row class="justify-center">
           <v-table
             class="array-container flex"
             v-bind="vuetifyProps('v-table')"

diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -6,7 +6,7 @@
           <v-expansion-panel-title class="py-0 px-0">
             <v-container class="py-0">
               <v-row>
-                <v-col align-self="center" class="pl-0"
+                <v-col class="pl-0 align-self-center"
                   ><v-select
                     v-if="mixedRenderInfos"
                     v-disabled-icon-focus
@@ -31,7 +31,7 @@
                   >
                   </v-select
                 ></v-col>
-                <v-col cols="3" align-self="center" class="text-truncate">{{
+                <v-col cols="3" class="text-truncate align-self-center">{{
                   computedLabel
                 }}</v-col>
               </v-row>

diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.vue b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
@@ -45,7 +45,7 @@
 
     <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-small">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 

diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
@@ -40,7 +40,7 @@
 
     <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-small">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 

diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -62,7 +62,7 @@
         align-content-center
         :class="styles.arrayList.container"
       >
-        <v-row justify="center">
+        <v-row class="justify-center">
           <v-expansion-panels
             accordion
             v-bind="expansionPanelsProps"
@@ -86,7 +86,7 @@
                         : ''
                     }`"
                   >
-                    <v-col v-if="!hideAvatar" align-self="center" class="pl-0">
+                    <v-col v-if="!hideAvatar" class="pl-0 align-self-center">
                       <validation-badge
                         overlap
                         bordered
@@ -101,12 +101,11 @@
                     </v-col>
 
                     <v-col
-                      align-self="center"
-                      :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
+                      :class="`align-self-center pl-0 text-truncate ${styles.arrayList.itemLabel}`"
                       >{{ childLabelForIndex(index) }}</v-col
                     >
                     <v-col
-                      align-self="center"
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -134,7 +133,7 @@
                       </v-tooltip>
                     </v-col>
                     <v-col
-                      align-self="center"
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -162,7 +161,7 @@
                         {{ control.translations.down }}
                       </v-tooltip>
                     </v-col>
-                    <v-col align-self="center">
+                    <v-col class="align-self-center">
                       <v-tooltip location="bottom">
                         <template v-slot:activator="{ props }">
                           <v-btn
@@ -237,7 +236,7 @@
       @click:outside="suggestToDelete = null"
     >
       <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-small">
           {{ control.translations.deleteDialogTitle }}
         </v-card-title>
 

diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -97,13 +97,11 @@ import {
   VStepperActions,
   VStepperHeader,
   VStepperItem,
+  VStepperVertical,
+  VStepperVerticalItem,
   VStepperWindow,
   VStepperWindowItem,
 } from 'vuetify/components';
-import {
-  VStepperVertical,
-  VStepperVerticalItem,
-} from 'vuetify/labs/VStepperVertical';
 import { useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
@@ -133,7 +131,7 @@ const layoutRenderer = defineComponent({
           category,
           originalIndex,
         }))
-        .filter((e) => e.category.value.visible)
+        .filter((e) => e.category.value.visible),
     );
 
     watch(
@@ -142,13 +140,13 @@ const layoutRenderer = defineComponent({
         if (
           visibleCategories.length > 0 &&
           !visibleCategories.some(
-            (entry) => entry.originalIndex + 1 === activeCategory.value
+            (entry) => entry.originalIndex + 1 === activeCategory.value,
           )
         ) {
           activeCategory.value = visibleCategories[0].originalIndex + 1;
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     return {

diff --git a/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`ListWithDetailRenderer.vue > should render component and match snapshot
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-7e93fcc2="" class="v-container v-locale--is-ltr list-with-detail" fill-height="">
-      <div data-v-7e93fcc2="" class="v-row">
+      <div data-v-7e93fcc2="" class="v-row v-row--density-default">
         <div data-v-7e93fcc2="" class="v-col pa-0">
           <header data-v-7e93fcc2="" class="v-toolbar v-toolbar--collapse-start v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr list-with-detail-toolbar">
             <!---->
@@ -32,7 +32,7 @@ exports[`ListWithDetailRenderer.vue > should render component and match snapshot
           </header>
         </div>
       </div>
-      <div data-v-7e93fcc2="" class="v-row list-with-detail-no-data">
+      <div data-v-7e93fcc2="" class="v-row v-row--density-default list-with-detail-no-data">
         <div data-v-7e93fcc2="" class="v-col">No data</div>
       </div>
     </div>

diff --git a/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
@@ -72,6 +72,12 @@ describe('OneOfRenderer.vue', () => {
         }
       });
     expect(found).toBeTruthy();
+
+    // Cleanup: Close the dialog and flush pending Vuetify animations
+    // to prevent JSDOM from throwing an error during teardown.
+    wrapper.getComponent(OneOfControlRenderer).vm.cancel();
+    await wrapper.vm.$nextTick();
+    await new Promise((resolve) => requestAnimationFrame(resolve));
   });
 
   it('should render component and match snapshot', () => {

diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
@@ -6,12 +6,14 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
     <div data-v-4896f876="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated array-list">
       <!---->
       <div class="v-card__loader">
-        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
           <div class="v-progress-linear__background"></div>
           <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+          <!---->
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
+              <!---->
               <div class="v-progress-linear__indeterminate long"></div>
               <div class="v-progress-linear__indeterminate short"></div>
             </div>
@@ -49,11 +51,12 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
       </div>
       <div data-v-4896f876="" class="v-card-text">
         <div data-v-4896f876="" class="v-container v-locale--is-ltr" justify-space-around="" align-content-center="">
-          <div data-v-4896f876="" class="v-row justify-center">
-            <div data-v-4896f876="" class="v-table v-theme--light v-table--density-default array-container flex">
+          <div data-v-4896f876="" class="v-row v-row--density-default justify-center">
+            <div data-v-4896f876="" class="v-table v-table--gridlines-horizontal v-theme--light v-table--density-default array-container flex">
               <!---->
               <div class="v-table__wrapper">
                 <table>
+                  <!---->
                   <thead data-v-4896f876="">
                     <tr data-v-4896f876="">
                       <th data-v-4896f876="" scope="col">Name</th>