Incorrect `Drawer`'s `nested` effect for non-default `direction`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the UDrawer behavior described for direction="right" and nested, then inspect the generated change location in dist/index.js and the surrounding nested-effect logic. Reproduce the drawer in a Nuxt UI 4.4.0 project and verify that the nesting effect follows the configured direction without regressing the default direction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100