Layouts
The layout system is the heart of every application. Below are the officially supported examples, ranging from desktop to mobile applications. While Vuetify.js aims to be as un-opinionated as possible, the layout structure must be explicitly followed to receive the expected results.

Default application markup

This is the default application markup for Vuetify. The key is that drawer, toolbar, main and footer exist on the same level in the DOM. Using any one of the 5 pre-made vue-cli templates will automatically include this structure:
<v-app>
  <v-navigation-drawer></v-navigation-drawer>
  <v-toolbar></v-toolbar>
  <main>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </main>
  <v-footer></v-footer>
</v-app>
content_copy

Examples

#1 Baseline
edit
The default structure of the Vuetify layout is one of the few opinionated designs you will encounter in the framework. It is done so that each layout is easy to understand and works as expected for any given scenario. Below is the baseline structure for a layout. It includes a navigation drawer, toolbar, right navigation drawer, content and footer.

#2 Permanent drawer
edit
Permanent navigation drawers are default open. These are used for applications that are desktop only and are not openable or closeable.

#3 Permanent clipped drawer
edit
A clipped drawer rests under the application toolbar.

#4 Permanent floating drawer
edit
A floating drawer has no visible container (no border-right).

#5 Permanent floating drawer in a card
edit
A card can be used to contain a navigation drawer's items.

#6 Persistent
edit
A persistent drawer can be opened or closed. This is recommended sidebar for an application that supports both desktop and mobile.

#7 Temporary
edit
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimiced on the persistent drawer when on mobile. Clicking outside of the drawer will cause it to close.

#8 Dark theme
edit
Vuetify also supports the dark application theme. This will not override components that have default themes so in some cases it will be necessary to manually set the dark theme accents.