Support Vue 3 (update: use FormKit [https://formkit.com], the successor to Vue Formulate for Vue 3)

[axwalker]

Describe the new feature you'd like

Now that Vue 3 has hit release candidate stage, it could be a good time to look into supporting it? Just tried on a fresh Vue project and the first issue I ran into was:

Uncaught TypeError: Cannot set property '$formulate' of undefined

Which I'm guessing is related to Vue.prototype.$formulate now needing to be something more like app.config.globalProperties.$formulate.

I pulled down vue-formulate to get a sense of what might need updating and realised there are potentially a few dependencies as well that may need updating too - and I'm not sure what their Vue 3 support is like yet.

I'd be happy to try and help with the update if it's something you think you'd be willing to look at soon?

[justin-schroeder]

Yep, we definitely need Vue 3 support asap! I don’t think it is going to require much of a change, but there are some big questions around how we do things like testing. The dependencies you're referring to are all for the testing. I would really like to avoid having 2 libraries (a lot of packages have a xyz-next library for Vue3 support). I think we can probably get away with some small code tweaks to detect which version of vue is used and slightly alter things like the install process.

I'd love any help you'd like to offer 👍

[axwalker]

Yes, I was going to ask about that - I too have been seeing lots of xyz-next packages. I think you're right to want to avoid that here. Unless the next packages are exposing a bunch of Vue 3 specific functionality I don't think the trade off is worth it, eg converting all your plugins to expose composition APIs instead or something.

I'll try and take a more thorough look around later this week to get my head around what changes might be necessary.

On the testing side, are you thinking about actually running the tests against both versions of Vue in two separate runs/environments? Otherwise it's hard to be sure at any point that you don't introduce something that is gonna clash with the version your tests aren't actually running against.

[justin-schroeder]

Yeah, ideally I would really like to run all the tests against both Vue2 and Vue3. I think vue-formulate currently has ~500 tests and I just know getting them to all work with vue-test-utils-next is going to be a major pain. In fact that repo's readme says:

We are working on some documentation to help people migrate. At this point you will have better luck trying this out with a brand new Vue 3 app, as opposed to upgrading an existing Vue 2 app. Feedback and bug reports are welcome!

But the idea of re-writing 500+ tests for Vue3 sounds absolutely horrible. Open to suggestions on the best path forward there. Maybe we isolate any areas where there are likely to be breaking changes between the two? I'm not confident either that vue-test-utils-next will be stable anytime soon, especially considering vue-test-utils for Vue2 was beta until May 5th of 2020 😬 and regularly introduced breaking changes.

Maybe invest heavily into cypress testing?

[axwalker]

Those are the 3 options that came to my mind too.

1. Run the same tests against both Vue 2 and Vue 3 with vue-test-utils and vue-test-utils-next respectively

• You'd have to update the tests to potentially behave differently for each version of Vue / vue-test-utils. You could extract this out where possible into your own mount helpers or whatever it is that needs this version-dependent behaviour.
• How time consuming this is initially depends on how much the API and behaviour of vue-test-utils-next is changing vs the old version. And like you say, there's a good chance of it not being stable for a while!
• If memory serves me rightly, vue-test-utils wasn't initially under the vuejs namespace/org, so maybe that contributed to the delay in a full stable release? I think it was avoriaz or something originally? A stable test library release could hopefully get a bit more priority now!

2. Write completely new tests just for Vue 3

• Like you, I didn't really want to think about this!

3. Use Cypress or similar

• You're having to rewrite your tests here too (or at least write additional tests), but at least it feels like it comes with other benefits, ie slightly more future-proofed testing, the ability to test against different browsers etc.
• Potentially increased chance of test flakiness vs your existing tests.
• Going to take considerably longer to run these tests.
• Cypress has experimental component testing but that's currently tied to Vue 2 and isn't certain to stick around, so that's probably not much help right now

---

Something like option (1) seems like potentially the best option to look into first?

Have you read through much of the migration docs for Vue 2 -> 3? Do have much of a sense of which parts may impact vue-formulate? I can try running the migration helper too.

[axwalker]

I ran the migration helper for src/ and examples / - no obsolete syntax was detected. For test/, all I got was:

1. Replace "src/*.{js,vue}" with "src/:.{js,vue}+"
  Line 21: test/jest.conf.js
  Reason: The syntax for route matching has changed since Vue Router now uses path-to-regexp under the hood
  More info: http://vuejs.org/guide/migration-vue-router.html#One-or-More-Named-Parameters

They do understandably say:

Note however that only about 80% of API changes are detectable with this utility.

And this won't cover the vue-test-utils-next stuff also.

[axwalker]

I've had a couple of hours to look into this this evening. I've opened up a very, very early stages PR, but I don't necessarily expect it to be the way you want to move forward. For the moment it's there mostly just to pass on my thoughts/learnings so far!

[sudip571]

I was trying to use Vue-Formulate in Vue 3 project and got an issue (please see the attached screenshot)
Please help me out.

[axwalker]

Hi, @sudip571 - Vue 3 is not yet supported by vue-formulate. It's on the future roadmap, but it will not work right now.

[axwalker]

Hey @justin-schroeder, hot on the heels of the full Vue 3 release announcement - have you thought any more about whether to have a separate -next package or not?

[justin-schroeder]

Still working through it, there will definitely need to be a full Vue 3 only version at some point so we can drop V2 support, but a compatibility version might be doable. I still need to figure out how to get around some of the tree shaking api differences though, like import { h } from 'vue' not sure if there is a way to do that optionally with static analysis 😬

[axwalker]

Hmm, I can see how that could be tricky. When you talk about tree shaking, do you mean when you're bundling with rollup to deploy vue-formulate to npm? I know you can't do conditional ES module imports, but could you use commonjs for those with a flag - something like:

if (process.env.VUE_TARGET_VERSION === '3') { 
  const { h } = require('vue')
}

From what I understand tree shaking can work with this sort of constant evaluation. This would be for building two separate versions though, but at least it would be from the same source.

When you have a clearer picture of what you want to do, let me know if there's anything I might be able to help with!