All new drawer

[MickL]

Package

v4.x

Description

The drawer used by Nuxt UI is vaul-vue, a project that is not maintained for a long time and has major issues on touch devices. Also Nuxt UI has two separate drawers/slideovers: USlideover and UDrawer.

I would suggest to add a dedicated Drawer to Nuxt UI, or better to upstream Reka UI (so it will be available to a broader audience), that is maintained by Nuxt UI / Reka UI team.

When doing so, either USlideover or UDrawer could be removed in favor of one unified component.

Additional context

vaul-vue, and therfor Nuxt UI Drawer, has major issues on touch devices, see unovue/vaul-vue#36 which is open since march 2024:

The drawer is not scrollable on touch devices because the scrolling collides with closing. You can test on mobile devices here: https://nuxt-ui-drawer.vercel.app/

Reproduction: https://github.com/MickL/nuxt-ui-drawer

[benjamincanac]

The vaul-vue project is part of Unovue (the Reka UI team), I'm aware it is no longer maintained but what is your suggestion here? Fork it to make a new one? I'm not sure this is the solution 😬

I disagree on merging Drawer and Slideover though, those are two different components that serve different purposes like on shadcn/ui there are both Sheet and Drawer.

[MickL]

I would suggest to either fork or make an all new one. If Nuxt UI team handles the drawer I am sure it will be well maintained now and in the future. Of course it would be preferable if the new component is added to Reka UI instead of Nuxt UI so it is available to both, but I dont know if there is a harsh distinction between the two teams and projects.

To me the only difference between Drawer and Slideover is that the drawer can be dragged to close, but maybe I am overseeing something. In any case, the slideover should also be closable by dragging/swiping as this is a behavior users expect on touch devices. I saw this in many user tests: Users try to swipe to close, but nothing happens and they immediately devalue the website.

[MickL]

I was thinking about it: What distincts the Drawer from the Slideover? What I see:

• It can come in from top/bottom
• It can have a handle
• It can be closed by dragging

Nuxt UI already has a nice slideover component, wouldnt it make sense to add the missing features to the existing Slideover and ditch the Drawer? At least this three things would be nice for the slideover as well, especially close by dragging (or at least by swipe).

I added a comparison Drawer vs Slideover to my repo to make this more clear.

[AndreasFaust]

I also experience issues with vaul-vue. As the drawer is a central, often needed component especially for mobile apps, an actively maintained solution would be great.

[benjamincanac]

@zernonia We have lots of issues with the vaul-vue Drawer component and it seems abandoned (last commit 8 months ago), do you have a recommendation regarding this? Should we build our own based on Reka's Dialog primitives?

[zernonia]

Yo @benjamincanac ! Yeah original vaul project itself has tons of issue, and maintainer has stopped maintaining it. So it's gonna take time to fix it given the complexity of the component.

I'm thinking of implementing Drawer component similar to Base UI in Reka UI, which is unstyled by default (saved alot of complexity) and has much cleaner API in my opinion. This might take awhile tho 😬

[benjamincanac]

@zernonia Love the idea! That would be awesome to have the Drawer component inside Reka UI directly so we can drop the vaul-vue dependency. Do you want me to take a look and init a PR?

[AndreasFaust]

@zernonia @benjamincanac Here a lesser known drawer, which looks great and is already written in Vue:
https://vue-equipment.maas.engineering/plugins/MagicDrawer/

It is structurally different from the one in Base UI, but maybe there are things to learn from it, too.

[zernonia]

Yeah Im open to that @benjamincanac ! Thanks @AndreasFaust for the link, could be useful 😁