[Feature Request]: Use VueDemi to make lib compatible with Vue2 and Vue3

[TheAlexLichter]

Hey 👋

I've read the related issues (#136, #31 and so on) before and am aware that headlessui does not work for Vue 2 right now.
While Vue 3 is out for a couple of months now and adoption rate is growing, several parts of the ecosystem are still catching up. Thus, it'd be amazing to have Vue 2 support.
I know that supporting Vue 2 seems like a larger undertaking but from my understanding it is definitely doable via vue-demi, ideally without lots of changes.

Do you think it'd be interesting to take a look into vue-demi (or would you maybe consider a PR adding Vue 2 support with it)?

[adamwathan]

It's doable but definitely a lot of work because the VNode structure is different in 2 vs 3, and all of our components are written using raw VNode stuff, no templates or anything. We'd have to add a significant amount of conditional logic, which would add a lot to the bundle size.

There are also a bunch of limitations in the composition API plugin that you need if you want to support Vue 2, and I bet we would run into issues there:

https://github.com/vuejs/composition-api#limitations

Headless UI is still very early in development and I expect that by the time it's closer to v1.0 Vue 3 will be much more mainstream than it is now compared to 2.0, so unfortunately I don't think it's a good use of our resources to develop or maintain a Vue 2 version right now. If someone in the community wanted to build a separate library that reimplements the components for Vue 2 that's totally welcome of course though, it's all MIT 👍🏻

[hvitis]

Hey! Would you be able to give me a hint how would I change the components I bought to be usable in Vue2 ? (I am using Nuxt 2.15)
Is there a library for it or a way I could implement them?
Thank you

[TheAlexLichter]

Because HeadlessUI is still available for Vue3 only, you'd have to implement the "logic" (e.g. for dropdowns or modals) on your own.

Maybe with Vue 2.7 and the composition API backport, Headless UI might have a chance to also work there with some slight modifications?

[JessicaSachs]

Hey @adamwathan, I came up with a workflow and toolchain to cross-compile SFCs to Vue 2.7 and Vue 3 for library authors. I'm going to be giving a talk about it in May and publicizing a template based on it. In short, it reduces the burden of maintenance significantly for library maintainers as linting rules, types, testing, and building all work and output two different packages: one for Vue 2.7 users and one for Vue 3+ users.

It uses symlinks and I'm able to build and maintain a component library that renders and uses <script setup> and all the other goodies without needing long-running feature branches, backports, or separate source code. You're still bound by some runtime caveats (namely, reactivity).

Would you be interested in revisiting this? It looks like the ecosystem might be stuck on 2.x for a while and I don't want to have to reimplement Headless UI at work.

[adamwathan]

Hey @JessicaSachs! Honestly I am not interested in maintaining a Vue 2.x version ourselves at all — just can’t justify dedicating the resources to it and would not use it ourselves so there’s no real motivation there.

Everything is open source of course though so anyone can do whatever they want with it — if you are interested in using the tooling you’ve developed to publish and maintain v2 compatible version you are totally welcome to do that 🙌🏻

[JessicaSachs]

Would you consider upstreaming some refactors to make it easier on me? Namely using JSX instead of h functions? (<script setup> would be great also! But it would be work for you and either one would be fine.)

To be clear: I'm talking about the cost maintenance, not implementation. I'll happily go all-in on implementation if you'd be willing to take a PR. Because we use TailwindUI, I would rather point my team at your docs, recipes, and all the other beautiful stuff you build until we can cut over to Vue 3, which seems like for 5-6 applications will be in year(s).

[adamwathan]

Namely using JSX instead of h functions?

I think the problem is I'm not sure if this is actually possible for the low-level stuff we are doing, otherwise we probably would have done it in the first place 🙁