feat(drawer): replace vaul-vue with reka-ui's native Drawer

docs/app/components/content/examples/drawer/DrawerNestedExample.vue

@@ -3,7 +3,7 @@
     <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' }">
+      <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
         <UButton color="neutral" variant="outline" label="Open nested" />
 
         <template #content>

docs/content/docs/2.components/drawer.md

@@ -4,7 +4,7 @@ category: overlay
 links:
   - label: Drawer
     icon: i-custom-reka-ui
-    to: https://github.com/unovue/vaul-vue
+    to: https://reka-ui.com/docs/components/drawer
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Drawer.vue
@@ -230,31 +230,6 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
-### Handle Only
-
-Use the `handle-only` prop to only allow the Drawer to be dragged by the handle.
-
-::component-code
----
-prettier: true
-props:
-  handleOnly: true
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-  content: |
-
-    <Placeholder class="h-48 m-4" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
-
-#content
-:placeholder{class="h-48 m-4"}
-::
-
 ### Overlay
 
 Use the `overlay` prop to control whether the Drawer has an overlay or not. Defaults to `true`.
@@ -328,60 +303,6 @@ name: 'drawer-dismissible-example'
 ---
 ::
 
-### Scale Background
-
-Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.
-
-::component-code
----
-prettier: true
-props:
-  shouldScaleBackground: true
-  setBackgroundColorOnScale: true
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-  content: |
-
-    <Placeholder class="h-48 m-4" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
-
-#content
-:placeholder{class="h-screen m-4"}
-::
-
-::warning
-Make sure to add the `data-vaul-drawer-wrapper` directive to a parent element of your app to make this work.
-
-```vue [app.vue]
-<template>
-  <UApp>
-    <div class="bg-default" data-vaul-drawer-wrapper>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-    </div>
-  </UApp>
-</template>
-```
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  app: {
-    rootAttrs: {
-      'data-vaul-drawer-wrapper': '',
-      'class': 'bg-default'
-    }
-  }
-})
-```
-
-::
-
 ## Examples
 
 ### Control open state
@@ -416,7 +337,7 @@ name: 'drawer-responsive-example'
 
 ### Nested drawers
 
-You can nest drawers within each other by using the `nested` prop.
+You can nest drawers within each other — nesting is detected automatically, no extra prop is needed.
 
 ::component-example
 ---

docs/nuxt.config.ts

@@ -42,8 +42,7 @@ export default defineNuxtConfig({
       }
     },
     rootAttrs: {
-      'data-vaul-drawer-wrapper': '',
-      'class': 'bg-default'
+      class: 'bg-default'
     }
   },
 
@@ -251,7 +250,6 @@ export default defineNuxtConfig({
         'tailwind-variants',
         '@comark/vue',
         '@comark/vue/plugins/highlight',
-        'vaul-vue',
         '@vueuse/integrations/useFuse',
         '@floating-ui/dom',
         '@tiptap/vue-3',

package.json

@@ -190,7 +190,6 @@
     "unplugin": "^3.3.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.1.0",
-    "vaul-vue": "0.4.1",
     "vue-component-type-helpers": "^3.3.6"
   },
   "devDependencies": {

playgrounds/nuxt/app/pages/components/drawer.vue

@@ -22,19 +22,11 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `data-vaul-drawer-wrapper` directive to your content to make it work." :inset="inset" close>
-      <UButton color="neutral" variant="outline" label="Open with scale" />
-
-      <template #body>
-        <Placeholder class="h-screen w-full" />
-      </template>
-    </UDrawer>
-
-    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background close>
+    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" close>
       <UButton color="neutral" variant="outline" label="Open nested" />
 
       <template #footer>
-        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
+        <UDrawer :inset="inset" :ui="{ content: 'h-full' }">
           <UButton color="neutral" variant="outline" label="Open nested" />
 
           <template #content>

playgrounds/nuxt/nuxt.config.ts

@@ -25,8 +25,7 @@ export default defineNuxtConfig({
         '@vueuse/integrations/useFuse',
         'ai',
         'tailwind-variants',
-        'tailwindcss/colors',
-        'vaul-vue'
+        'tailwindcss/colors'
       ]
     }
   }