N
Nuxt•4d ago
QRST

Nuxt UI - Responsive Model/Drawer

Hey guys, how would we implement this responsive model with Nuxt UI. https://www.shadcn-vue.com/docs/components/drawer.html
shadcn-vue
Drawer - shadcn/vue
A drawer component for vue.
2 Replies
kapa.ai
kapa.ai•4d 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: ---------------------- I can help you implement a responsive drawer with Nuxt UI, which is similar to the shadcn-vue drawer component you referenced. Nuxt UI provides a UDrawer component that can be used to create a responsive drawer that slides in from any side of the screen. Here's how you can implement it: Basic Implementation 
<template>
  <UDrawer>
    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />

    <template #content>
      <div class="h-48 m-4">
        <!-- Your drawer content here -->
      </div>
    </template>
  </UDrawer>
</template>
<template>
  <UDrawer>
    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />

    <template #content>
      <div class="h-48 m-4">
        <!-- Your drawer content here -->
      </div>
    </template>
  </UDrawer>
</template>
Responsive Behavior To make the drawer responsive, you can use the direction prop to change the direction based on screen size: 
<script setup>
const isSmallScreen = ref(false)

// Watch for screen size changes
onMounted(() => {
  const checkScreenSize = () => {
    isSmallScreen.value = window.innerWidth < 768 // Adjust breakpoint as needed
  }
  
  window.addEventListener('resize', checkScreenSize)
  checkScreenSize() // Initial check
  
  onUnmounted(() => {
    window.removeEventListener('resize', checkScreenSize)
  })
})
</script>

<template>
  <UDrawer :direction="isSmallScreen ? 'bottom' : 'right'">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <div class="min-h-48 m-4">
        <!-- Your drawer content here -->
      </div>
    </template>
  </UDrawer>
</template>
<script setup>
const isSmallScreen = ref(false)

// Watch for screen size changes
onMounted(() => {
  const checkScreenSize = () => {
    isSmallScreen.value = window.innerWidth < 768 // Adjust breakpoint as needed
  }
  
  window.addEventListener('resize', checkScreenSize)
  checkScreenSize() // Initial check
  
  onUnmounted(() => {
    window.removeEventListener('resize', checkScreenSize)
  })
})
</script>

<template>
  <UDrawer :direction="isSmallScreen ? 'bottom' : 'right'">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #content>
      <div class="min-h-48 m-4">
        <!-- Your drawer content here -->
      </div>
    </template>
  </UDrawer>
</template>
Customizing the Drawer You can customize the drawer with various props: 
<template>
  <UDrawer 
    :direction="isSmallScreen ? 'bottom' : 'right'"
    :inset="true"
    title="Responsive Drawer"
    description="This drawer adapts to screen size"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
<template #body>
      <div class="min-h-48">
        <!-- Your drawer content here -->
      </div>
    </template>
    
    <template #footer>
      <UButton label="Save" color="primary" class="w-full" />
    </template>
  </UDrawer>
</template>
<template>
  <UDrawer 
    :direction="isSmallScreen ? 'bottom' : 'right'"
    :inset="true"
    title="Responsive Drawer"
    description="This drawer adapts to screen size"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
<template #body>
      <div class="min-h-48">
        <!-- Your drawer content here -->
      </div>
    </template>
    
    <template #footer>
      <UButton label="Save" color="primary" class="w-full" />
    </template>
  </UDrawer>
</template>
Additional Features Nuxt UI's Drawer component supports: - Different directions (top, right, bottom, left) Drawer Direction - Inset mode to create space around the drawer Drawer Inset - Background scaling for visual depth Drawer Scale Background - Controlled open state with v-model Drawer Control Open State For more complex layouts, you might also want to check out the UDashboardSidebar component which has built-in responsive behavior and can be configured with different modes including drawer mode: 
<template>
  <UDashboardGroup>
    <UDashboardSidebar mode="drawer">
      <!-- Sidebar content -->
      <UNavigationMenu :items="links" orientation="vertical" />
    </UDashboardSidebar>

    <UDashboardPanel>
      <!-- Main content -->
    </UDashboardPanel>
  </UDashboardGroup>
</template>
<template>
  <UDashboardGroup>
    <UDashboardSidebar mode="drawer">
      <!-- Sidebar content -->
      <UNavigationMenu :items="links" orientation="vertical" />
    </UDashboardSidebar>

    <UDashboardPanel>
      <!-- Main content -->
    </UDashboardPanel>
  </UDashboardGroup>
</template>
This approach provides a dashboard layout with a sidebar that transforms into a drawer on smaller screens Dashboard Sidebar Mode. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d 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?