Skip to main content

​
Usage

The VBottomSheet component is a modified VDialog that slides from the bottom of the viewport. 
<template>
  <v-btn @click="sheet = true">
    Open Bottom Sheet
  </v-btn>
  
  <v-bottom-sheet v-model="sheet">
    <v-card>
      <v-card-title>Bottom Sheet</v-card-title>
      <v-card-text>
        This content slides up from the bottom
      </v-card-text>
    </v-card>
  </v-bottom-sheet>
</template>

<script setup>
import { ref } from 'vue'
const sheet = ref(false)
</script>

​
Inset

Create an inset bottom sheet with margins: 
<template>
  <v-bottom-sheet
    v-model="sheet"
    inset
  >
    <v-card>
      <v-card-text>
        Inset bottom sheet with margins
      </v-card-text>
    </v-card>
  </v-bottom-sheet>
</template>

​
Persistent

Prevent closing when clicking outside: 
<template>
  <v-bottom-sheet
    v-model="sheet"
    persistent
  >
    <v-card>
      <v-card-text>
        This sheet requires explicit close action
      </v-card-text>
      <v-card-actions>
        <v-btn @click="sheet = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-bottom-sheet>
</template>

​
Full Width

Make the bottom sheet full width: 
<template>
  <v-bottom-sheet
    v-model="sheet"
    width="100%"
  >
    <!-- content -->
  </v-bottom-sheet>
</template>

​
Custom Height

Control the sheet height: 
<template>
  <v-bottom-sheet
    v-model="sheet"
    height="400"
  >
    <!-- content -->
  </v-bottom-sheet>
</template>

​
Props

​
modelValue
boolean
The v-model value controlling the sheet’s visibility
​
inset
boolean
default:"false"
Reduces the width of the sheet and adds margin on the sides
​
width
string | number
Sets the width of the sheet
​
maxWidth
string | number
Sets the maximum width of the sheet
​
height
string | number
Sets the height of the sheet
​
maxHeight
string | number
Sets the maximum height of the sheet
​
persistent
boolean
default:"false"
Prevents closing when clicking outside the sheet
​
scrim
boolean | string
default:"true"
Controls the scrim (overlay) behind the sheet. Pass a color string to customize
​
transition
string
default:"bottom-sheet-transition"
The transition to use when opening/closing
​
closeOnBack
boolean
default:"true"
Closes the sheet when the browser back button is pressed
​
closeOnContentClick
boolean
default:"false"
Closes the sheet when clicking on its content
​
noClickAnimation
boolean
default:"false"
Disables the bounce animation when clicking outside a persistent sheet
​
scrollable
boolean
default:"false"
Makes the sheet content scrollable
​
fullscreen
boolean
default:"false"
Makes the sheet fullscreen
​
eager
boolean
default:"false"
Forces the component’s content to render on mount
​
contentClass
string
CSS class to apply to the sheet content

​
Slots

​
default
slot
The default slot for sheet content
​
activator
slot
Slot for the element that activates the sheet

​
Events

​
update:modelValue
event
Emitted when the sheet visibility changes
VBottomSheet extends VDialog, so it inherits all dialog functionality while adding the bottom-sheet-specific transition and positioning.
For mobile-optimized experiences, bottom sheets are often preferred over traditional dialogs as they’re easier to reach with one hand.

Build docs developers (and LLMs) love

Get started for freeTalk to us