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!

[bbugh]

vue-demi may be helpful for the import issue. It allows you to import from vue-demi instead of vue or @vue/composition-api depending on which version of Vue is doing the importing.

[justin-schroeder]

@bbugh I saw vue-demi a few weeks ago and thought it looked really cool, but am I right in thinking though that to use vue-demi I would need to re-write Vue Formulate using the composition API? It seems like at first glance it’s more for new libraries that want to be written in Vue 3 but have backwards compatibility with Vue 2, but maybe I just don't really understand it?

[bbugh]

That is correct, if during vue-formulate@next you decide to use the composition API (which would may be really for this use case) in order to support Vue 3, vue-demi will make it easy to also support Vue 2 with the composition API.

We're also not really sure what the Vue 2 compatibility build is going to include, it may make it easy on everyone to move from Vue 2 to Vue 3.

[justin-schroeder]

Status update: at this point the current plan is to completely re-write Vue Formulate for Vue 3 and TypeScript, all other solutions are pretty hacky and not good long-term options. Vue Formulate serves some pretty critical roles in people's business apps and I don't want to put out anything that would compromise that, so I think a full rewrite for Vue 3 is in order. The positive is we'll have the opportunity to incorporate lots of learnings and efficiency improvements to make it much better.

[lewebsimple]

Any ETA on this ? How can we help ?

[justin-schroeder]

V3 is being cooked up right now. Shooting for the end of Q1 2021 for some kind of release (alpha, beta, or stable — ?), but you know how these timelines can go, so honestly — not ready till it's ready 😬.

Ok, better get back to it 😉

[justin-schroeder]

Final thought — if you're interested in being notified when there's news on V3 I would recommend subscribing to the Vue Formulate newsletter. We only send out messages when we make new releases and since version 3 is the next big one that will likely be the next email sent out. You can subscribe here:

https://mailchi.mp/193f17457807/vue-formulate-newsletter

[glynnforrest]

Final thought — if you're interested in being notified when there's news on V3 I would recommend subscribing to the Vue Formulate newsletter.

Cheers for that @justin-schroeder.

Is there an in-progress branch here on GitHub we can look at?

[justin-schroeder]

There will be once there's an alpha!

[timsayshey]

@justin-schroeder I see this is marked as help wanted - How can I help?

[justin-schroeder]

Thanks for the suggestion. To be clear though its not a technical issue, it’s really just a time issue. Takes a lot of time to rewrite, and, ya know it’s volunteer time.

[titusdecali]

Do we have any timeline on when Vue3 might be supported? I'm pretty dependent on its i18n features and have just moved to Vue3.

[qdubois]

@justin-schroeder how can I help?

[chasegiunta]

@justin-schroeder Just in case you haven't seen this: https://github.com/vueuse/vue-demi

Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 and 3. Without worrying about users’ installed versions.

[BilalBudhani]

Now that Vue Compat is available as a migration build (https://v3.vuejs.org/guide/migration/migration-build.html#overview) I'm wondering if this could be used to make vue-formulate work with Vue 3. I will try it myself when I get a chance.

[justin-schroeder]

@justin-schroeder Just in case you haven't seen this: https://github.com/vueuse/vue-demi

Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 and 3. Without worrying about users’ installed versions.

Unfortunately @chasegiunta I think Vue Demi is only helpful for writing a Vue 3 library that is compatible with Vue 2.

Now that Vue Compat is available as a migration build (https://v3.vuejs.org/guide/migration/migration-build.html#overview) I'm wondering if this could be used to make vue-formulate work with Vue 3. I will try it myself when I get a chance.

I'm going to look into it as well — although if it works it's a stopgap solution either way since a full re-write is underway with native Vue 3 support and lots of other improvements. Yes — it's taking longer than I anticipated due to unforeseen external circumstances (not related to this project). But we're actually more committed than ever to this project — it will be worth the wait :)

[chrishappy]

@justin-schroeder Any updates on a stopgap solution? (Or how to help with one?)

Currently, we're developing a web app in Vue 3 and trying to decide whether to wait for Vue Formulate, use another framework, or build our own.

[ar4mro]

Any ETA? my team just started a Vue 3 app and we love Vue Formulate, not to pressure guys, you are doing an amazing job!

[justin-schroeder]

We're planning to send out a community update about the current state of the next version in 2 weeks! To be clear — this is not the release of the next version, but a community update about the progress on it (which is well underway now) so stay tuned. That announcement will be made via the newsletter, which you can subscribe to here: https://mailchi.mp/193f17457807/vue-formulate-newsletter

[justin-schroeder]

Ok — here's that promised community update! We're looking for a smallish group of alpha testers for the next major version of Vue Formulate, which will be called: FormKit 🎉

You can read more about it and apply for the Alpha program here:

https://formkit.com

[digitalkaoz]

any ETA on a public beta?

[timsayshey]

Their site says "The Alpha Program is full but you can still apply for the upcomming Beta Program in late 2021."

So likely Q2 or Q3 2022.

[digitalkaoz]

yes, i've seen that, i even registered for the alpha but never heard anything from FormKit

[timsayshey]

Yeah, I couldn't wait so I had to migrate away from Formulate to Formvuelate.js.org. A little more manual but has great schema support, super flexible, and most importantly supports V3.

[digitalkaoz]

@timsayshey thinking about the same. a few things a missing or even not possible?

e.g. repeatable nested forms, like https://vueformulate.com/guide/inputs/types/group/#repeatable-groups

i only can see elements can be objects but not arrays, did you had such a use case?

[timsayshey]

@digitalkaoz - Formvuelate is a newer project so it is missing many of the features that Formulate has but the developers are very friendly and responsive so it's likely something you can discuss with them. Maybe they'll even add it or tell you how do it.

[chasegiunta]

The Alpha hasn't opened yet. On 10/23 Justin mentioned

alpha code should be available in less than a month, but it will definitely still be alpha

[justin-schroeder]

Howdy y'all 👋

If you're in the closed alpha we are already having conversations on the private discord channels — the alpha code release is expected for that group of people within a couple weeks of today.

We're shooting for a private beta by mid December or early January. Release candidate by the end of Q1 2022 (internal goal is end of January 2021). FWIW - FormKit is a very significant improvement over Vue Formulate that solves most of the pain points in Vue Formulate.

[andrew-boyd]

yes, i've seen that, i even registered for the alpha but never heard anything from FormKit

@digitalkaoz can you ping me in the Discord so I can get you added to the Alpha channels? That'll definitely be the first place any new drops (and already has previously).

[lewebsimple]

I'm very excited to try out the public beta of FormKit but couldn't find any update on a possible ETA.
Is the end of january still a plausible target?

Keep up the incredible work everyone!

[andrew-boyd]

Hello everyone. Today's the day! FormKit is stepping out of private beta and into the public eye. If you've been eager to check out what we've been up to then head on over to formkit.com and give it a spin.

Please jump into the Discord server if you have any issues and we'll do our best to help you out: https://discord.gg/2q3UZkUQbR

Thanks again for all of your support as we've worked to bring FormKit to life. We're honored to be able to bolster the Vue 3 ecosystem and bring a pleasant form authoring experience to the table.

This issue will be left opened and pinned as a guidepost for others looking for Vue 3 support for Vue Formulate.

Best,

-- The FormKit Team