Skip to content

feat(drawer): replace vaul-vue with reka-ui's native Drawer#6691

Draft
gabrielstuff wants to merge 1 commit into
nuxt:v4from
gabrielstuff:feat/drawer-reka-ui
Draft

feat(drawer): replace vaul-vue with reka-ui's native Drawer#6691
gabrielstuff wants to merge 1 commit into
nuxt:v4from
gabrielstuff:feat/drawer-reka-ui

Conversation

@gabrielstuff

Copy link
Copy Markdown

Summary

Replaces vaul-vue in UDrawer with reka-ui's own (newer) native Drawer primitives, fixing the SSR crash currently thrown by vaul-vue.

  • Confirmed the crash directly: vaul-vue@0.4.1's DrawerContent calls useScaleBackground() synchronously during setup(), which reads document.body.style.backgroundColor unguarded — throws document is not defined when the drawer's portal is force-mounted for SSR. Repro: https://stackblitz.com/fork/github/gabrielstuff/vaul-vue-ssr-crash-repro (contrast: reka-ui's Drawer SSRs cleanly under the identical setup — https://stackblitz.com/fork/github/gabrielstuff/reka-ui-drawer-ssr-ok).
  • reka-ui was already a dependency (used elsewhere in the library); vaul-vue is now removed entirely.
  • reka-ui's Drawer is headless/unstyled, so the open/close slide, live swipe-follow transform, and overlay fade are now authored as Tailwind utilities driven by reka's --drawer-* CSS custom properties, following the same pattern already used for Slideover's enter/exit animations (data-[state=open]:animate-[...]).

Behavioral changes

  • dismissible: false is now enforced centrally on the open-change reason (blocks escape-key, outside-press, swipe, and reason-less closes), rather than by intercepting individual outside-click/escape DOM events the way Modal does — reka's swipe-to-dismiss gesture closes the drawer directly through onOpenChange, bypassing those DOM events entirely, so the old interception pattern would have left swipe-to-dismiss un-blockable.
  • Nested drawers no longer need the nested prop — reka-ui's Drawer detects nesting automatically via context. The prop is removed; DrawerNestedExample and the playground demo are updated.
  • Props with no reka-ui equivalent are dropped: shouldScaleBackground, setBackgroundColorOnScale, scrollLockTimeout, fixed, noBodyStyles, handleOnly, preventScrollRestoration, closeThreshold. reka-ui's Drawer doesn't implement a background-scale effect, manual scroll-lock timing, or a handle-only drag restriction today. The data-vaul-drawer-wrapper root attribute (only needed for the scale-background feature) is removed from the docs app.
  • activeSnapPoint is renamed to snapPoint/defaultSnapPoint to match reka-ui's naming (v-model:snap-point).

Test plan

  • pnpm vitest run — full suite passes (256 files / 6365 tests), including regenerated snapshots for Drawer, DashboardSidebar, and Header (the two consumers embedding a mobile drawer).
  • pnpm typecheck — clean.
  • pnpm lint — clean.
  • Manually exercised the playgrounds/nuxt drawer demo page in a browser: all 4 directions, inset toggle, nested drawers (auto-scale of the parent, no nested prop), and the dismissible: false demo — confirmed outside-click and Escape are both blocked while the explicit close button still works. No console errors/warnings from the Drawer itself.

🤖 Generated with Claude Code

@github-actions github-actions Bot added the v4 #4488 label Jul 7, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jul 7, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@nuxt/ui@6691

commit: 496bf5e

Migrates UDrawer off vaul-vue onto reka-ui's Drawer primitives, closing the
SSR crash (`document is not defined`) that vaul-vue throws when the drawer
is force-mounted for SSR. reka-ui's Drawer is unstyled/headless, so the
open/close slide, live drag-follow transform, and overlay fade are now
authored as Tailwind utilities driven by reka's `--drawer-*` CSS vars,
matching the pattern already used for Slideover's enter/exit animations.

Behavioral notes:
- `dismissible: false` is now enforced centrally on the open-change reason
  (blocks escape/outside-press/swipe/programmatic-close-without-reason)
  since reka's swipe-to-dismiss bypasses the outside/escape DOM events
  Modal-style interception relies on.
- Nested drawers no longer need the `nested` prop — reka-ui detects nesting
  automatically via context.
- Dropped props with no reka-ui equivalent: `shouldScaleBackground`,
  `setBackgroundColorOnScale`, `scrollLockTimeout`, `fixed`, `noBodyStyles`,
  `handleOnly`, `preventScrollRestoration`, `closeThreshold`. `activeSnapPoint`
  is renamed to `snapPoint`/`defaultSnapPoint` to match reka's naming.

Updated the Drawer docs page and playground demo accordingly, and
regenerated snapshots for Drawer and the components that embed it
(DashboardSidebar, Header).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant