Migrate to `radix-vue`

[khairulhaaziq]

hi @benjamincanac , im a fan of the library!

Im one of the maintainers of radix-vue, I saw some of your components have accessibility issues.E.g.: accordion, radio, context menu. Do you think we can collaborate on working on it together and you utilizing radix-vue ? Some of our components are done such as accordion and radio and I think can just be a quick drop in replacement for your current setup. What do you think?

[benjamincanac]

Hello @khairulhaaziq,

Nice to hear that we finally get Radix for Vue, amazing work!

Would this mean dropping Headless UI everywhere?

I could be up for it, I was planning to refactor every component that uses Popper to switch to Floating UI and more specifically Headless UI Float but I see you already use it in your components.

[khairulhaaziq]

Hello @khairulhaaziq,

Nice to hear that we finally get Radix for Vue, amazing work!

Would this mean dropping Headless UI everywhere?

I could be up for it, I was planning to refactor every component that uses Popper to switch to Floating UI and more specifically Headless UI Float but I see you already use it in your components.

We dont need to drop Headless UI, for starters use radix-vue to fill in where headless UI doesnt fit, for example the accordion, radio. we can start there. The ones that are working fine and uses headless UI let it be for now, maybe we can think about it later if we want to restructure. I messaged you on discord. I would love to get your input on anything, let me know what you're thinking

[zernonia]

@benjamincanac We've released v1 for Radix Vue!! I believe bringing accessibility to components in nuxt/ui would be awesome!

WDYT? 😁

[benjamincanac]

@zernonia Congrats on the release! 😊

This would indeed be awesome to migrate to radix-vue, I don't feel confortable however to have both headlessui and radix-vue at the same time.

I think the best way would be to make a major version of @nuxt/ui to transition to radix-vue but this would imply a tremendous amount of work and a few inevitable breaking changes I suppose. I can't give a date as I have a lot on my plate right now, but I'll definitely consider it!

[zernonia]

Totally understood @benjamincanac . I believe there would be some breaking change as well, as some of the API is different.

@Atinux did reach out to me previously to ask for help with the migration. I believe we can collaborate on this 😁❤️

[benjamincanac]

This would be awesome, I'll reach out to you once I'm ready to start this 😊

[henrycunh]

Really glad this is happening!

[shaunnbarron]

We use to use Radix at my day job, and while I'm not a contributor to this project, I'd worry that you might be trading a handful of issues for another handful.

One issue we've had with Radix is it doesn't seem to support programmatically controlling a single dialog from multiple triggers. It works, but a11y is broken as focus is no longer returned to the appropriate trigger on close. So for everything to be happy, instead of:

<FiltersDialog :open="open" />

<Button @click="open = true">One trigger</Button>

<Button @click="open = true">Another trigger</Button>

you end up with something like this which isn't very easy on the eyes:

<FiltersDialog>
  <Button>One trigger</Button>
</FiltersDialog>

<FiltersDialog>
  <Button>Another trigger</Button>
</FiltersDialog>

This isn't an issue with Headless UI.

[jd-solanki]

I do want high level framework for radix vue and I guess nuxt UI is perfect fit 🎯

[alfredomtzrmz]

so this means in the future the library will get rid of HeadlessUI?

[benjamincanac]

That's the plan yes, would it be an issue for you?

[alfredomtzrmz]

@benjamincanac No I don't think so, if at least the UI remains the same I'll be happy 🚀

[akashkuteX]

@benjamincanac May I know what is the ETA, for this merger?

[benjamincanac]

We should start this next month 😊

[benjamincanac]

I just want to let you know that I started working on the next major to migrate everything to Radix Vue, you can read more about it here #1289.

[zernonia]

Feel free to reach out to me if you encountered any issue with radix-vue!! 😁💚

[akashkuteX]

I just want to let you know that I started working on the next major to migrate everything to Radix Vue, you can read more about it here #1289.

Thanks for the update:)

[jd-solanki]

Is it possible to provide components locally like Shadcn instead of using them from package/node_modules in next major?

[benjamincanac]

No it won't be possible, it is not the goal of this library. I'd recommend shadcn-vue built by the Radix Vue team if you want to do that 😊

https://www.shadcn-vue.com/