#6021·ui

Incorrect `Drawer`'s `nested` effect for non-default `direction`

Author: aaaaahaaaaaCreated Feb 10, 2026Updated Sep 17, 2026
Labelsupstream/reka-uiv5

Environment

Operating system macOS 25.2.0 CPU Apple M1 Pro (10 cores) Node.js version v24.13.0 nuxt/cli version 3.32.0 Package manager pnpm 10.27.0 Nuxt version 4.2.2 Nitro version 2.13.1 Builder vite 6.4.1 Config compatibilityDate, css, devtools, googleFonts, icon, imports, modules, nitro, routeRules, runtimeConfig, ssr, supabase, typescript, vite Modules @nuxt/eslint 1.13.0, @nuxt/ui 4.4.0, @nuxtjs/google-fonts 3.2.0, @nuxtjs/supabase 2.0.3, @pinia/nuxt 0.11.3, @vueuse/nuxt 13.9.0

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.4.0

Reproduction

UDrawer with direction="right" and nested props

Description

When using the nested prop of on a Drawer that has a non-default direction (e.g. right), then the nesting effect is not matching the direction. Specifically, the nesting effect remains upwards (which seems the default), even though it that case it should be right-to-left.

Additional context

Claude's analysis indicates this is a vaul-vue bug. The following generated pnpm patch does fix the problem:

diff
diff --git a/dist/index.js b/dist/index.js
--- a/dist/index.js
+++ b/dist/index.js
@@ -546,10 +546,10 @@
   }, { immediate: !0 });
   function Ve(o) {
     var B, E;
-    const R = o ? (window.innerWidth - re) / window.innerWidth : 1, b = o ? -16 : 0;
+    const R = o ? ((_(u.value) ? window.innerHeight : window.innerWidth) - re) / (_(u.value) ? window.innerHeight : window.innerWidth) : 1, b = o ? -16 : 0;
     G.value && window.clearTimeout(G.value), C((B = g.value) == null ? void 0 : B.$el, {
       transition: `transform ${O.DURATION}s cubic-bezier(${O.EASE.join(",")})`,
-      transform: `scale(${R}) translate3d(0, ${b}px, 0)`
+      transform: _(u.value) ? `scale(${R}) translate3d(0, ${b}px, 0)` : `scale(${R}) translate3d(${b}px, 0, 0)`
     }), !o && ((E = g.value) != null && E.$el) && (G.value = window.setTimeout(() => {
       var k, X;
       const A = ie((k = g.value) == null ? void 0 : k.$el, u.value);

Logs

shell-script