- 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 an example of the default application markup for Vuetify. You can place your layout elements anywhere, as long as you designate them with the app property. The key component in all of this is the
v-contentelement. This will be dynamically sized depending upon the structure of your designated app components. This allows you to create extremely customed solutions.
<v-app> <v-navigation-drawer app></v-navigation-drawer> <v-toolbar app></v-toolbar> <main> <v-content> <v-container fluid> <router-view></router-view> </v-container> </v-content> </main> <v-footer app></v-footer> </v-app>
<v-app> <v-navigation-drawer app></v-navigation-drawer> <v-toolbar app></v-toolbar> <main> <v-content> <router-view> <v-container fluid></v-container> </router-view> </v-content> </main> <v-footer app></v-footer> </v-app>
In order for your application to work properly, you must wrap it in a
v-appcomponent. This component is required for determining grid breakpoints for the layout. This can exist anywhere inside the body, but must be the parent of ALL Vuetify components.