Incorrect `Drawer`'s `nested` effect for non-default `direction`
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 --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
Source: nuxt/ui