Application
The v-app component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level.
API
Guide
In Vuetify, the v-app component is a convenient way to dynamically modify your application’s current theme and provide an entry point for your layouts. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.
More information on how to interact with the root sizing and styling is on the Application page.
When placing your application level components, the order matters. Elements are stacked based on when they register and are rendered in the DOM after the first nextTick (to account for suspense). Layouts utilize suspense to allow all layout components to register before rendering the initial layout.
The following example demonstrates how the v-app-bar component takes priority over v-navigation-drawer because of its rendering order:
<template>
<v-responsive class="border rounded" max-height="300">
<v-app>
<v-app-bar title="App bar"></v-app-bar>
<v-navigation-drawer>
<v-list>
<v-list-item title="Navigation drawer"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-main>
<v-container>
<h1 class="my-0">Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>Main Content
If we swap v-app-bar and v-navigation-drawer, the registration order changes and the layout system layers the two components differently.
<template>
<v-responsive class="border rounded" max-height="300">
<v-app>
<v-navigation-drawer>
<v-list>
<v-list-item title="Navigation drawer"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar title="App bar"></v-app-bar>
<v-main>
<v-container>
<h1 class="my-0">Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>Main Content
Theme
The v-app component makes it easy to enable one of your application defined themes. By default, Vuetify comes with 2 themes, light and dark. Each one is a collection of various colors used to style each individual component. Because v-app acts as an interface for theme functionality, you have the ability to change it dynamically within your template.
The following example demonstrates how to use the theme prop to toggle the theme from dark to light.
<template>
<v-responsive class="border rounded" max-height="300">
<v-app :theme="theme">
<v-app-bar class="px-3">
<v-spacer></v-spacer>
<v-btn
:prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
text="Toggle Theme"
slim
@click="onClick"
></v-btn>
</v-app-bar>
<v-main>
<v-container>
<h1 class="my-0">Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>