Vuejs 3

[ViPErCZ]

Are you planning a version for vuejs 3?

[jarvelov]

Hi,

Yes, I want to provide a Vue v3 version.

There have been some changes to Vue's render function's syntax in v3. VFJS uses the render functions under the hood and the same syntax is used in the uiSchema. I need to do some research if there's a way to provide backwards compatibility for current VFJS users so upgrading to the next version of VFJS with Vue v3 support won't mean that they have to rewrite their UI schemas.

We also need to replace Vue as an event bus with something else.

That's about it in terms of changes. It's not a lot of work to get it running on Vue v3, but it would require a bump in VFJS version from 2 to 3, and with that I was hoping to introduce some other changes with that version bump.

With that said however I could release a pre-release version with Vue v3 support, I'll look into it this week and see if I can get it running. I'll keep you posted.

[ViPErCZ]

Thanks you!

[jarvelov]

Hey @ViPErCZ

Just a quick update. I've managed to get a simple demo to render using Vue 3, as you can see in the gif below. There are a few differences between how Vue 2 and 3 handles things but in order to preserve compability with Vue 2 I have to write some logic to perform actions differently based on what version of Vue is used. Right now I just updated the code to work with Vue 3, but that will break things for Vue 2.

Here's a demo of an input rendered using Vue 3:

I will try to put some time into this over the weekend. There are a couple of errors and warnings thrown in the console and performance is bad, but it works. It will probably take some time to iron out the kinks but I aim to publish a Vue 3 compatible version of VFJS as soon as it is good enough.

[ViPErCZ]

OK thank you. I will be looking forward and I will wait ... ;-)

[jarvelov]

Hi again,

Another update. There are quite a few differences between vue2 and vue3 and I'm trying to build a compability layer to make the upgrade transition as easy and smooth as possible, however it takes quite a bit of time to find out all the nuances in how the two versions behave. I didn't have any more time last weekend to make any more progress on the vue3 version, however this weekend I have quite the open schedule, so hopefully I can provide a status update in a few days with more progress made.

[ViPErCZ]

Great news. I look forward to...

[chriscauley]

Hello @jarvelov, I'm interested in using this on a vue3 project. I tried copying one of the demos into my project and it failed spectacularly (form didn't render and error was l.a is not a constructor). Is there a publicly available branch that is more vue 3 ready?

I'll gladly lend a hand, if you show me where to start. Just to make sure there's nothing wrong on my end I made this demo repo of what I tried. I copied the "minimal demo" and yanked out the pretty print component.

https://github.com/chriscauley/vfjs-demo

[jarvelov]

Hi @chriscauley! Unfortunately there's no public branch yet. I have't had time to make any more progress on a vue 3 compatible build. I could publish the code tweaked for vue 3 if you still wish to try it out and see if you can fix some of the bugs. I'll be uploading the code tomorrow either way in a new branch if someone else also wants to take a shot at it.

[chriscauley]

@jarvelov that would be great. I'll see if I can help.

[jarvelov]

Hi @chriscauley

Thanks for offering your help.

I just pushed the vue3rewrite branch. You can run npm run dev to create development UMD and ESM builds. I updated the example-1 demo to be Vue 3 compatible, as far as compatibility goes for now anyway. There's something which causes Vue to think that an endless loop will occur, judging by the error message in the console, however I have not yet found the cause for it.

I think clues to the answer lies somewhere in Vue 3's documentation regarding its reactivity API. I haven't yet had time to understand the new concepts in vue 3 with setup and reactive and such, so it might be easier to solve than it looks if one is equipped with that knowledge.

Best of luck and let me know if you find anything.

[jarvelov]

Hi all! Life's gotten in the way and I have to spend my time away from VFJS for the next couple of weeks. More info here. I expect to be back in January 2021.

[Bruno17]

Is VFJS now working with Vue3, actually?

[Taaitaaiger]

There seem to be some import/export errors. I did get the basic example to work by changing ...getters to ...getters.default in src/vfjs-global-mixin/vfjs-validation/index.js and then rebuilding with npm run dev.

[Bruno17]

@Taaitaaiger
Thanks for that!
How did you proceed

What I did try:

git clone https://github.com/jarvelov/vue-form-json-schema.git
cd vue-form-json-schema
git checkout vue3rewrite
npm install

that was running for a while

then I got

npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish E:\laragon\www\vjfs\vue-form-json-schema
> npm run build


> [email protected] build E:\laragon\www\vjfs\vue-form-json-schema
> NODE_ENV=production webpack -p --config webpack.config.prod.js

Der Befehl "NODE_ENV" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `NODE_ENV=production webpack -p --config webpack.config.prod.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.

did I anything wrong? I'm on windows.

[Taaitaaiger]

Looks like the NODE_ENV is interpreted literally in the command and Windows doesn't understand it. I know too little about Windows to help with that, sorry.
I did run into other problems later on, eg the h function from vue seems to be called with the wrong arguments, and inserting javascript code as text as a result. I haven't found out what's going wrong there.

[Bruno17]

got example 1 running by changing

  "scripts": {
    "build": "NODE_ENV=production webpack -p --config webpack.config.prod.js",
    "dev": "NODE_ENV=development webpack --config webpack.config.dev.js --watch",
    "lint": "eslint src",
    "prepublish": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

to

  "scripts": {
    "build": "set NODE_ENV=production && webpack -p --config webpack.config.prod.js",
    "dev": "set NODE_ENV=development && webpack --config webpack.config.dev.js",
    "lint": "eslint src",
    "prepublish": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

in package.json

I had also to change ...getters to ...getters.default in vue-form-json-schema\src\vfjs-global-mixin\methods\vfjs-validation\index.js and run npm run dev

[steinarhovland]

@jarvelov hope you're doing well! Sorry for disturbing you, but I was just wondering if you could give a small update on Vue 3 compatibility / roadmap?

We have a project that is Vue 2 based today using VFJS, and we plan on upgrading to Vue 3 in the near future. And to do that we need a plan for how to deal with all of our JSON schemas. I really hope we can continue to use VFJS, it's been a joy to use.

[jarvelov]

Hi @steinarhovland

Thanks for reaching out. Glad to hear you've found VFJS useful. There exists a Vue 3 compatible version, however I haven't really had a lot of time to test it out and as such I haven't released it yet. However, it's better that people can test it out and report back so I will release it as v3.0.0-alpha.0 this weekend and the ESM compatible version will be available in the vue3rewrite branch later today.

There are some issues I have yet to come to a solution to though. They are not so much an issue for users of VFJS but rather for me as the maintainer.

I would like to continue supporting Vue 2, however there are some internal breaking changes in Vue which makes it a bit challenging to use the same code base for both Vue 2 and Vue 3. It is not impossible to support both 2 and 3, but it will take some effort to set up.

Another thing is that I'm not really sure as to the future of continuing to publish UMD builds, seeing as the Vue 3 docs doesn't seem to mention them anywhere, or maybe I've just missed it. Overall I'm not sure whether anyone actually uses the UMD version either so I might drop support for it and just have the ESM build.

Anyway this might be subject to change. I will post an update about this when I've made up my mind. For now at least VFJS will support Vue 2 (both ESM and UMD builds) and Vue 3 (ESM build, at first at least).

[jarvelov]

v3.0.0-alpha.0 has now been released. Here's a demo of the Registration Form Example running VFJS v3.0.0-alpha.0 and vue v3.2.8. Please test it out and report back if you find any issues.

[steinarhovland]

@jarvelov Thank you so much! Look forward to testing it out!

[mohitsuccessive]

Hello @jarvelov

Thank you So Much For Updating the Awesome Package. I was stuck for the last two days due to validation and state and not being updated in the vue3. Also, I have one more question So now can I use this package in my latest project?

[semiaddict]

I would like to continue supporting Vue 2, however there are some internal breaking changes in Vue which makes it a bit challenging to use the same code base for both Vue 2 and Vue 3. It is not impossible to support both 2 and 3, but it will take some effort to set up.

Hello @jarvelov,
If you are still experiencing issues supporting both Vue 2 and Vue 3, you might want to check out https://github.com/vueuse/vue-demi .
Note: I am not affiliated with that project, nor have I actually tested it. But I just bumped into it while looking at https://github.com/vueuse/gesture, and remembered this thread I read last week :)

[miguelzapaton]

Dear @jarvelov and all other interested folks,

I'd like to share my VFJS Vue3 experiments with you:

https://github.com/miguelzapaton/vue3-form-json-schema

I took the 3.0.0-alpha.0 as a base and it looks quite promising that VFJS will also work very soon in fancy Vue3 projects.

For more information please check the README.

@jarvelov please feel free to cherry pick everything you like for the official version from my fork repo.

As @semiaddict pointed out the way to go for Vue3 could be either using vue-demi or having a two separate libs:

• vue-form-json-schema (bug fix only)
  and
• vue3-form-json-schema

Please try out the refactored examples. I've not yet found out why example4 is not working .. hints and feedback are welcome.

Miguel

[Bruno17]

@miguelzapaton do you have a UMD version of your fork or is it possible to build one?

[miguelzapaton]

@Bruno17 Yes, but untested as the fork is still experimental.

Just clone and build the fork. Please check the README for instructions. You can find the resulting UMD lib file under /lib/dist/..

Feel free to adapt the lib build in vite.config.js to your needs.
More information on building libs with vite: https://vitejs.dev/guide/build.html#library-mode

I would be happy to know if UMD works.

[Bruno17]

@miguelzapaton
I'm trying https://github.com/jarvelov/vue-form-json-schema/tree/vue3rewrite/examples/example-1
with vue3-form-json-schema.umd.js build from your fork,
but window.VueFormJsonSchema seems to be undefined at that line: app.use(window.VueFormJsonSchema.vfjsPlugin);

[miguelzapaton]

Yes, this has to do with the lib name and the -not- included dependencies (currently neither lodash-es nor ajv - which are not loaded separetly in example-1 either)

I have to dive in further - in the meantime a quick version of ./lib/vite.config.js that allowed me to build a fork lib that works with example-1 (use app.use(window.Vue3FormJsonSchema.vfjsPlugin); correspondingly):

import {defineConfig} from 'vite';
import * as path from 'path';
import visualizer from 'rollup-plugin-visualizer';

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'Vue3FormJsonSchema',
      // formats: ['es'],  /* default es+umd -> UMD has no code-splitting ! */
      fileName: (format) => `vue3-form-json-schema.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        exports: 'named'
      },
      plugins: [
        visualizer({
          filename: path.resolve(__dirname, 'dist/stats.html'),
          template: 'treemap' // sunburst|treemap|network
        })
      ]
    }
  },
  esbuild: {
    minify: false  // optimize here (vite doc says no for libs!) or better not and let users optimize in their projects?
  }
})

If you build the fork lib with pnpm builddev you also get source maps for better debugging in the browser.

Miguel

[Bruno17]

Thank you, @miguelzapaton. That works!
At First, I tried the example-one from here, but it didn't update the model.
Your new UMD example-one works.

Do you think, it is possible to get that working within a setup like that? :
https://github.com/SaleCar/Quasar-UMD-Template

[miguelzapaton]

You mean the UMD example-1 from my latest commit here?

This was the necessary change to make the model update working in the umd/example-1 (and all other vue3 examples):

@update:state="onChangeState"
@update:validated="onValidated"
@update:modelValue="onChange"

I don't see any reason why the integration in the Quasar-UMD-Template shouldn't work. Just give it a try starting with the integration of the umd/example-1 ...

[Bruno17]

@miguelzapaton
So I've created a fork and are trying to add a Quasar UMD example.
Maybe better to discuss issues outside of this Repo here and started an issue on my fork
Bruno17#1 (comment)

[miguelzapaton]

At first sight es/example-4 with external bootstrap-vue components is fine now.

@Bruno17 Are Quasar compononents working too?

[Bruno17]

@miguelzapaton
It works! After seeing your new Quasar example with the valueProp property, I got it working.

[bishopandco]

I am using the v3.0.0.alpha tagged version on a vue 3 app.
When I try to use a custom component, I get the warning:

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Component that was made reactive: ▶{name: "HelloWorld", render: ƒ render(), __hmrId: "469af010", __file: "src/components/HelloWorld.vue"}

Here is a codesandbox

Any ideas how to fix this?

[miguelzapaton]

@bishopandco

Feel free to check out my Vue3 fork:

https://github.com/miguelzapaton/vue3-form-json-schema

It's based on 3.0.0-alpha.0

Feedback welcome!

[trollfot]

@miguelzapaton you've done quite some work on your fork. Could it be possible to propose a pull request, now that vue3 is mature ?

[miguelzapaton]

@trollfot and all other interested people

Two reasons why there's no pull request:

• I don't want to care about Vue2 compatibility

• My fork is still alpha and currently for experienced developers only

Feel free to link it as local dependency in your project. pnpm makes it very easy:

pnpm add ../vue3-form-json-schema/lib

At the moment I'm trying to further optimize it, especially for SSR.
Currently it is working with SSR but not really rendering the form on the server due to the internal bus and callback structure.

First experiments are promising that even complex forms could get rendered on the server 😁

[David-Mueller]

would be cool to have a version which works without SSR released as npm package!

[luksak]

@miguelzapaton I'm quite interested in this. Is there a way to get a build of your fork up on npm?

[luksak]

In case anyone else ends up here like me... Here is a very good implementation in vue: https://jsonforms.io/