feat(Drawer): add nested prop

benjamincanac · benjamincanac · commit e2695ee7e427 · 2025-07-18T15:55:24.000+02:00
Resolves #4320
diff --git a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+    <template #footer>
+      <UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+        <UButton color="neutral" variant="outline" label="Open nested" />
+
+        <template #content>
+          <Placeholder class="flex-1 m-4" />
+        </template>
+      </UDrawer>
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
@@ -328,6 +328,17 @@ name: 'drawer-responsive-example'
 ---
 ::
 
+### Nested drawers :badge{label="Soon" class="align-text-top"}
+
+You can nest drawers within each other by using the `nested` prop.
+
+::component-example
+---
+prettier: true
+name: 'drawer-nested-example'
+---
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Drawer's body.
diff --git a/playground/app/pages/components/drawer.vue b/playground/app/pages/components/drawer.vue
@@ -28,6 +28,20 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
+    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background>
+      <UButton color="neutral" variant="outline" label="Open nested" />
+
+      <template #footer>
+        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
+          <UButton color="neutral" variant="outline" label="Open nested" />
+
+          <template #content>
+            <Placeholder class="flex-1 m-4" />
+          </template>
+        </UDrawer>
+      </template>
+    </UDrawer>
+
     <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
@@ -37,6 +37,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * Whether the drawer is nested in another drawer.
+   * @defaultValue false
+   */
+  nested?: boolean
   class?: any
   ui?: Drawer['slots']
 }
@@ -57,7 +62,7 @@ export interface DrawerSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { usePortal } from '../composables/usePortal'
@@ -90,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -144,5 +149,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>
