chore(deps): update vaul-vue

Author: benjamincanac

docs/content/3.components/drawer.md

@@ -217,12 +217,12 @@ slots:
 ::
 
 ::warning
-Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your app to make this work.
+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-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="bg-(--ui-bg)" data-vaul-drawer-wrapper>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
@@ -235,7 +235,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
 export default defineNuxtConfig({
   app: {
     rootAttrs: {
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
       'class': 'bg-(--ui-bg)'
     }
   }

docs/nuxt.config.ts

@@ -55,8 +55,7 @@ export default defineNuxtConfig({
       }]
     },
     rootAttrs: {
-      // @ts-expect-error - vaul-drawer-wrapper is not typed
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
       'class': 'bg-(--ui-bg)'
     }
   },

package.json

@@ -116,7 +116,7 @@
     "unplugin": "^2.2.1",
     "unplugin-auto-import": "^19.1.1",
     "unplugin-vue-components": "^28.4.1",
-    "vaul-vue": "^0.3.0",
+    "vaul-vue": "^0.4.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

playground-vue/src/app.vue

@@ -84,7 +84,7 @@ defineShortcuts({
 
 <template>
   <UApp :toaster="(appConfig.toaster as any)">
-    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
       <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
 

playground/app/app.vue

@@ -85,7 +85,7 @@ defineShortcuts({
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
     <UApp :toaster="appConfig.toaster">
-      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
+      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
 

playground/app/pages/components/drawer.vue

@@ -20,7 +20,7 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
+    <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">
       <UButton color="neutral" variant="outline" label="Open with scale" />
 
       <template #body>

pnpm-lock.yaml

@@ -7,7 +7,6 @@
   },
   "ignoreDeps": [
     "typescript",
-    "vaul-vue",
     "vue-tsc"
   ],
   "baseBranches": ["v2", "v3"],