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
Applies a specific theme to the component and all its children.<v-app theme="dark">
<!-- Content -->
</v-app>
Applies custom CSS classes to the component.
Applies custom inline styles to the component.
Slots
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>