nuxt / nuxt/ui

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

Open
#6,021 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

upstream/reka-ui v5
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.