Skip to main content

​
Usage

The VMain component is used to wrap the primary content of your application. It automatically adjusts its padding based on the layout system (app bars, navigation drawers, etc.). 
<template>
  <v-app>
    <v-app-bar></v-app-bar>
    <v-navigation-drawer></v-navigation-drawer>
    
    <v-main>
      <!-- Your page content goes here -->
    </v-main>
  </v-app>
</template>

​
Scrollable

Make the main content area independently scrollable: 
<template>
  <v-main scrollable>
    <!-- Long content that scrolls independently -->
  </v-main>
</template>

​
With Custom Dimensions

Set custom width and height: 
<template>
  <v-main
    width="1200"
    height="600"
  >
    <!-- Content -->
  </v-main>
</template>

​
Props

​
scrollable
boolean
default:"false"
When enabled, wraps content in a scrollable container allowing independent scrolling of the main content area
​
width
string | number
Sets the width of the component
​
height
string | number
Sets the height of the component
​
maxWidth
string | number
Sets the maximum width of the component
​
maxHeight
string | number
Sets the maximum height of the component
​
minWidth
string | number
Sets the minimum width of the component
​
minHeight
string | number
Sets the minimum height of the component
​
tag
string
default:"main"
Specify a custom tag used on the root element

​
Slots

​
default
slot
The default Vue slot for main content
VMain should be used as a direct child of VApp to properly integrate with Vuetify’s layout system. The component automatically calculates padding based on other layout components like VAppBar and VNavigationDrawer.
When using the scrollable prop, the content is wrapped in a v-main__scroller div that handles the scrolling behavior.

Build docs developers (and LLMs) love

Get started for freeTalk to us