Switch to Vue3 and Vuetify3

[yaffol]

Vuetify 3 beta is almost released.

It would be wise to test the renderer set against Vuetify 3 (and also, therefore, Vue3).

[yaffol]

Some I noticed in Vuetify-3 is a vue-intl (formatjs) intl adapter https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/locale/adapters/vue-intl.ts

[deka]

Hi.
Can i start with vue-vanilla and switch easily to vuetify renderers when he's ready for vuetify 3 ?
Regards

[sdirix]

Hi @deka,

It depends. The Vuetify renderer set supports most of the Vanilla use cases and many more. Therefore you can very likely reuse your schemas and UI Schemas and everything should still work. If you implemented some custom renderers, they will likely still work, however they will no longer fit to the renderer set as you probably also want to use Vuetify for them then. These have to be reimplemented. Also any custom CSS will probably not fit when you switch.

[suraj740]

Hi @sdirix @kchobantonov
i have forked vuetify renderer and migrated to vue3 and vuetify3, build is also done successfully.

After installation is done, when i am trying to use the package by importing vuetifyRenderers, getting following error,

Uncaught (in promise) 'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms? Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:285 queueJob @ runtime-core.esm-bundler.js:279 (anonymous) @ runtime-core.esm-bundler.js:5692 triggerEffect @ reactivity.esm-bundler.js:394 triggerEffects @ reactivity.esm-bundler.js:384 triggerRefValue @ reactivity.esm-bundler.js:1000 set value @ reactivity.esm-bundler.js:1044 (anonymous) @ index.vue:190 mountComponent @ runtime-core.esm-bundler.js:5490 processComponent @ runtime-core.esm-bundler.js:5448 patch @ runtime-core.esm-bundler.js:5038 render2 @ runtime-core.esm-bundler.js:6209 mount @ runtime-core.esm-bundler.js:4402 app.mount @ runtime-dom.esm-bundler.js:1605 app.mount @ framework.ts:80 initApp @ entry:52 await in initApp (async) (anonymous) @ entry:60 Show 224 more frames

Source code can be found here, code

Could you please tell me what went wrong here?

Thanks!

[suraj740]

@sdirix just went throught your fork sdirix/jsonforms-vuetify-renderers/tree/vue3-exploration
That worked perfectly fine to me.
vuetify component props changes were required, i made those changes it worked well. Thanks

[sdirix]

@suraj740 Great that it works for you! Did you do many changes? Can you push your changes somewhere so I can take a look?

[suraj740]

Hi @sdirix Not many changes, just few ones like in stringcontrolrender i changed value prop to model-value, so on.
Since in vuetify3 they made changes so we need to check each component props acccordingly.
Right now i hv made changes only in string type controls, I will be testing all components in few days.

You can have a look at my fork here.

[suraj740]

added fix for all enums, radiogroup, password and multistringcontrol types as well.

[trollfot]

Is it possible to actually create a pull-request of this in-progress integration and make a branch out of it ?

[suraj740]

@sdirix sometimes i get this error Uncaught (in promise) 'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms? may i know will be the reason. i am using it in nuxt3 project

[sdirix]

I created a vue3 branch on this repository with a POC of the Vue3/Vuetify3 switch. Most controls appear to work and the example app works somewhat.

Main missing parts:

• Date/Time renderers lost their pickers and therefore are mostly text fields right now
• The mask integration is gone
• As a replacement for VTabsItems I used VWindow, however that behaves differently and therefore needs to be adapted
• The example app needs to be properly fixed

Any help of the community is greatly appreciated, just open a PR against vue3 if you have improvements.

[sdirix]

A first version of the Vue 3 Vuetify renderers is released as @jsonforms/vue-vuetify with the version number 3.1.0-preview.0. Anyone interested please have a look. Feedback greatly appreciated.

[dominicpedro]

I tried using the preview branch with Nuxt3 and it also worked, thank you @sdirix

[MingdaMa]

A first version of the Vue 3 Vuetify renderers is released as @jsonforms/vue-vuetify with the version number 3.1.0-preview.0. Anyone interested please have a look. Feedback greatly appreciated.

Hi, @sdirix , oneOf examples don't work well with vuetify3 renderer, $ref won't be rendered even when the corresponding option is selected

[Martin-Idel]

I'm trying this library out to finally migrate our codebase to vue3. So far, everything looks good but we also have a lot of custom renderers, so we don't use that many features. I'd also like to switch to vitest instead of jest. However I run into one problem I don't know how to resolve, maybe it's a bug? Or maybe some special configuration is required?

Anyways: using a "standard" vite - vitest - vue3/test-utils with testing-library setup with the following vite config:

  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./tests/unit/setup.js",
    server: {
      deps: {
        inline: ["vuetify"],
      },
    },
  },

I get the following error:

Error: require() of ES Module [...]/node_modules/vuetify/lib/components/index.mjs not supported.
Instead change the require of [...]/node_modules/vuetify/lib/components/index.mjs to a dynamic import() which is available in all CommonJS modules.
 ❯ Object.<anonymous> node_modules/@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.cjs.js:6:18

which looks like it is coming from here. Any ideas?

For full reproduction, see https://github.com/Martin-Idel/jsonformsproblem/tree/vitest-problem (branch vitest-problem):

• Clone the repo
• Run yarn install
• Run yarn test
• See error.

[sdirix]

Hi @Martin-Idel,

It seems that you somehow end up in our commonJS product (jsonforms-vue-vuetify.cjs.js) whose require seems to resolve to an ESM module of Vuetify in your environment.

I'm not familiar with vitest, but this should likely be aligned, i.e. use commonJS everywhere, use some transpilation step before test execution or use ESM everywhere. Our ESM product is jsonforms-vue-vuetify.esm.js.

[yaffol]

I literally just encountered the same thing.

We're running Vite/Vitest so should be full ESM.

I'll try to make a minimal reproduction to pin down where the miss-aligned import is happening.

[Martin-Idel]

@yaffol Thanks. You can also try out my branch, it's already pretty stripped down, but my knowledge aoubt esm/cjs, etc. is sadly limited.

[fablexis]

Are the datepickers working with this @jsonforms/vue-vuetify version?

I'm just trying to use a date input but it renders the default browser behaviour instead of the one that is part of vuetify

Current render:

Desired render:

@sdirix @yaffol @Martin-Idel

[yaffol]

@fablexis the Vuetify 3 date pickers weren't released when the initial porting to Vue 3/Vuetify 3 happened, so they were reverted to native HTML5 datepickers. The Vuetify 3 date pickers are now released so it wouldn't be much work to port the components across from the main branch into the vue3 one.

[yaffol]

@Martin-Idel I tracked down the trouble with vitest to a missing exports key in package.json, which seems to be required to properly tell node where to load the ESM build - from publint pkg.module is used to output ESM, but pkg.exports is not defined. As NodeJS doesn't read pkg.module, the ESM output may be skipped.
Full report.

Can you try this version of my fork to see if it fixes it for you too? @pvale/vue-vuetify@3.2.1-alpha.4

[Martin-Idel]

@yaffol Sorry for the VERY late reply, I was preoccupied with other projects.

I still get error messages, but this time, different ones, so that definitely goes in the right direction.
My error now is

Cannot find module '.../jsonformsproblem/node_modules/lodash/cloneDeep' imported from .../jsonformsproblem/node_modules/@pvale/vue-vuetify/lib/jsonforms-vue-vuetify.esm.mjs
Did you mean to import lodash/cloneDeep.js?

That looks like a different sort of problem between node and ESM module types. Maybe this time around, the error is on my part, but I don't see it, yet.