Adapt example app for Vue 3 and Vuetify 3

Author: sdirix

packages/example/.eslintrc.js

@@ -4,17 +4,17 @@ module.exports = {
     node: true,
   },
   extends: [
-    "plugin:vue/essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    'plugin:vue/essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/eslint-config-prettier',
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
 };

packages/example/src/App.vue

@@ -1,13 +1,11 @@
 <template>
-  <v-fade-transition mode="out-in">
-    <router-view />
-  </v-fade-transition>
+  <router-view />
 </template>
 
 <script lang="ts">
 export default { name: 'App' };
 </script>
 
 <style scoped>
-@import '~@jsonforms/vue2-vuetify/lib/jsonforms-vue2-vuetify.esm.css';
+@import '~@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.esm.css';
 </style>

packages/example/src/components/DemoForm.vue

@@ -61,8 +61,7 @@ import {
   JsonSchema,
   JsonFormsI18nState,
 } from '@jsonforms/core';
-import { JsonForms, JsonFormsChangeEvent } from '@jsonforms/vue2';
-import JsonRefs from 'json-refs';
+import { JsonForms, JsonFormsChangeEvent } from '@jsonforms/vue';
 import { createTranslator } from '../i18n';
 
 export default {
@@ -159,16 +158,18 @@ export default {
       resolvedSchema.error = undefined;
 
       if (schema) {
-        JsonRefs.resolveRefs(schema).then(
-          function (res) {
-            resolvedSchema.schema = res.resolved;
-            resolvedSchema.resolved = true;
-          },
-          function (err: Error) {
-            resolvedSchema.resolved = true;
-            resolvedSchema.error = err.message;
-          }
-        );
+        resolvedSchema.schema = schema;
+        resolvedSchema.resolved = true;
+        // JsonRefs.resolveRefs(schema).then(
+        //   function (res) {
+        //     resolvedSchema.schema = res.resolved;
+        //     resolvedSchema.resolved = true;
+        //   },
+        //   function (err: Error) {
+        //     resolvedSchema.resolved = true;
+        //     resolvedSchema.error = err.message;
+        //   }
+        // );
       } else {
         // nothing to resolve
         resolvedSchema.resolved = true;

packages/example/src/components/Settings.vue

@@ -269,23 +269,25 @@
 import { sync } from 'vuex-pathify';
 
 export default {
-  name: 'Settings',
-  computed: {
-    validationMode: sync('app/jsonforms@validationMode'),
-    hideRequiredAsterisk: sync('app/jsonforms@config.hideRequiredAsterisk'),
-    showUnfocusedDescription: sync(
-      'app/jsonforms@config.showUnfocusedDescription'
-    ),
-    restrict: sync('app/jsonforms@config.restrict'),
-    collapseNewItems: sync('app/jsonforms@config.collapseNewItems'),
-    initCollapsed: sync('app/jsonforms@config.initCollapsed'),
-    breakHorizontal: sync('app/jsonforms@config.breakHorizontal'),
-    readonly: sync('app/jsonforms@readonly'),
-    locale: sync('app/jsonforms@locale'),
-    hideAvatar: sync('app/jsonforms@config.hideAvatar'),
-    hideArraySummaryValidation: sync(
-      'app/jsonforms@config.hideArraySummaryValidation'
-    ),
+  name: 'AppSettings',
+  setup() {
+    return {
+      validationMode: sync('app/jsonforms@validationMode'),
+      hideRequiredAsterisk: sync('app/jsonforms@config.hideRequiredAsterisk'),
+      showUnfocusedDescription: sync(
+        'app/jsonforms@config.showUnfocusedDescription'
+      ),
+      restrict: sync('app/jsonforms@config.restrict'),
+      collapseNewItems: sync('app/jsonforms@config.collapseNewItems'),
+      initCollapsed: sync('app/jsonforms@config.initCollapsed'),
+      breakHorizontal: sync('app/jsonforms@config.breakHorizontal'),
+      readonly: sync('app/jsonforms@readonly'),
+      locale: sync('app/jsonforms@locale'),
+      hideAvatar: sync('app/jsonforms@config.hideAvatar'),
+      hideArraySummaryValidation: sync(
+        'app/jsonforms@config.hideArraySummaryValidation'
+      ),
+    };
   },
   data: function () {
     return {

packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue

@@ -28,12 +28,12 @@ import {
   JsonFormsRendererRegistryEntry,
   withIncreasedRank,
 } from '@jsonforms/core';
-import { rendererProps } from '@jsonforms/vue2';
+import { rendererProps } from '@jsonforms/vue';
 import {
   ArrayLayoutRenderer,
   arrayLayoutRendererEntry,
-} from '@jsonforms/vue2-vuetify';
-import { VTooltip, VIcon, VBtn } from 'vuetify/lib';
+} from '@jsonforms/vue-vuetify';
+import { VTooltip, VIcon, VBtn } from 'vuetify/components';
 import { defineComponent } from 'vue';
 
 const controlRenderer = defineComponent({

packages/example/src/layouts/default/AppBar.vue

@@ -25,7 +25,7 @@
     <v-toolbar-items>
       <v-container fill-height fluid justify-end
         ><v-row dense>
-          <v-col><settings /> </v-col>
+          <v-col><app-settings /> </v-col>
           <v-col><theme-changer /> </v-col>
         </v-row>
       </v-container>
@@ -35,18 +35,19 @@
 
 <script lang="ts">
 import { sync } from 'vuex-pathify';
-import Settings from '@/components/Settings.vue';
+import AppSettings from '@/components/Settings.vue';
 import ThemeChanger from '@/components/ThemeChanger.vue';
 import { AppStore } from '../store/modules/types';
 
 export default {
   name: 'DefaultAppBar',
   components: {
     ThemeChanger,
-    Settings,
+    AppSettings,
   },
-  computed: {
-    app: sync<AppStore>('app/'),
+  setup() {
+    const app = sync<AppStore>('app/');
+    return { app };
   },
   data() {
     return {

packages/example/src/layouts/default/Drawer.vue

@@ -44,13 +44,16 @@ import { examples } from '@/examples';
 
 export default {
   name: 'DefaultDrawer',
+  setup() {
+    const drawer = sync('app/drawer');
+    return {
+      drawer,
+    };
+  },
   data() {
     return {
       examples,
     };
   },
-  computed: {
-    drawer: sync('app/drawer'),
-  },
 };
 </script>

packages/example/src/layouts/default/View.vue

@@ -1,8 +1,6 @@
 <template>
   <v-main>
-    <v-fade-transition mode="out-in">
-      <router-view />
-    </v-fade-transition>
+    <router-view />
   </v-main>
 </template>
 

packages/example/src/layouts/default/index.vue

@@ -9,13 +9,15 @@
 </template>
 
 <script lang="ts">
+import { defineAsyncComponent } from 'vue';
+
 export default {
   name: 'DefaultLayout',
 
   components: {
-    DefaultAppBar: () => import('./AppBar'),
-    DefaultDrawer: () => import('./Drawer'),
-    DefaultView: () => import('./View'),
+    DefaultAppBar: defineAsyncComponent(() => import('./AppBar.vue')),
+    DefaultDrawer: defineAsyncComponent(() => import('./Drawer.vue')),
+    DefaultView: defineAsyncComponent(() => import('./View.vue')),
   },
   computed: {
     formonly(): boolean {

packages/example/src/main.ts

@@ -1,15 +1,17 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import vuetify from './plugins/vuetify';
 import './plugins';
 
-Vue.config.productionTip = false;
+// Vue.config.productionTip = false;
 
-new Vue({
-  router,
-  store,
-  vuetify,
-  render: (h) => h(App),
-}).$mount('#app');
+createApp(App).use(store).use(router).use(vuetify).mount('#app');
+
+// new Vue({
+//   router,
+//   store,
+//   vuetify,
+//   render: (h) => h(App),
+// }).$mount('#app');