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

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 👍🏻

[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.