N
Nuxt•4mo ago
QRST

Inner Drawer/ Model

He guys i want to have a drawer in a framed container like so instead of the whole page any ideas? https://streamable.com/4wxdch
Streamable
Watch Screen Recording 2025-05-29 180521 | Streamable
Watch "Screen Recording 2025-05-29 180521" on Streamable.
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @QRST. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To render a Drawer inside a specific container (not covering the whole page), you should use the portal prop of the UDrawer component. By default, the Drawer renders in a portal attached to the body, but you can set the portal prop to a specific element (like a div inside your framed container) so the Drawer appears only within that container. How to do it: 1. Add a ref or an id to your container element. 2. Pass that element (or its selector) to the portal prop of UDrawer. Example: 
<template>
  <div ref="drawerContainer" class="relative w-[400px] h-[600px] border">
    <UDrawer :portal="drawerContainer">
      <UButton label="Open" />
      <template #content>
        <div class="p-4">Drawer content inside container</div>
      </template>
    </UDrawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const drawerContainer = ref(null)
</script>
<template>
  <div ref="drawerContainer" class="relative w-[400px] h-[600px] border">
    <UDrawer :portal="drawerContainer">
      <UButton label="Open" />
      <template #content>
        <div class="p-4">Drawer content inside container</div>
      </template>
    </UDrawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const drawerContainer = ref(null)
</script>
- The portal prop can accept an HTMLElement, a selector string, or true/false (default is true, which attaches to the body). - Make sure your container has position: relative or similar, so the Drawer positions correctly inside it. Reference:
This approach is supported by the portal prop in the Drawer API, which allows you to specify where the Drawer should be rendered, not just the default body location Drawer Props. If you want to see a visual effect like scaling the background only inside the container, you may need to adjust the should-scale-background and related props, but the main requirement is to use the portal prop as shown above. Let me know if you need a more specific example or further customization! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@516423579571847168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?