Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt

Use this file to discover all available pages before exploring further.

​
VApp

The VApp component is a required wrapper for all Vuetify applications. It provides the layout system foundation, theme support, and manages the root application structure.

​
Usage

<template>
  <v-app>
    <v-app-bar>
      <!-- App bar content -->
    </v-app-bar>
    
    <v-navigation-drawer>
      <!-- Drawer content -->
    </v-navigation-drawer>
    
    <v-main>
      <!-- Main content -->
    </v-main>
    
    <v-footer>
      <!-- Footer content -->
    </v-footer>
  </v-app>
</template>

​
Basic Example

<template>
  <v-app>
    <v-main>
      <v-container>
        <h1>My Vuetify Application</h1>
      </v-container>
    </v-main>
  </v-app>
</template>
VApp must be the root component of your application. All Vuetify components should be nested within VApp to ensure proper functionality.

​
Props

​
theme
string
Applies a specific theme to the component and all its children.
<v-app theme="dark">
  <!-- Content -->
</v-app>
​
class
string | array | object
Applies custom CSS classes to the component.
​
style
string | array | object
Applies custom inline styles to the component.

​
Slots

​
default
slot
The default slot for application content. All layout components should be placed here.

​
Layout System

VApp provides the layout system foundation that manages the positioning and sizing of layout components like VAppBar, VNavigationDrawer, VFooter, and VBottomNavigation. 
<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer app>
      <!-- Navigation items -->
    </v-navigation-drawer>

    <v-main>
      <!-- Page content -->
    </v-main>
  </v-app>
</template>
Layout components with the app prop automatically register with VApp’s layout system and adjust the content area accordingly.

​
Theme Integration

VApp automatically provides theme context to all child components: 
<template>
  <v-app theme="dark">
    <!-- All children inherit dark theme -->
    <v-main>
      <v-card>
        <!-- Card uses dark theme -->
      </v-card>
    </v-main>
  </v-app>
</template>

​
RTL Support

VApp automatically handles RTL (right-to-left) layout when the locale is set to an RTL language: 
<template>
  <v-app>
    <!-- Automatically applies RTL classes when needed -->
    <v-main>
      <!-- Content -->
    </v-main>
  </v-app>
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us