- 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>
Keep in mind that for the purposes of these docs, the
v-navigation-drawer's have had their overflow removed and set to absolute positioning. In your application, you can choose to omit these properties.
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 w/ right variant, toolbar, temporary navigation drawer w/ right variant, content and footer.
#2 Permanent drawer
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
A clipped drawer rests under the application toolbar.
#4 Permanent floating drawer
A floating drawer has no visible container (no border-right).
#5 Permanent floating drawer in a card
A card can be used to contain a navigation drawer's items.
A persistent drawer can be opened or closed. This is recommended sidebar for an application that supports both desktop and mobile.
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked on the persistent drawer when on mobile. Clicking outside of the drawer will cause it to close.
#8 Dark theme
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.
In order for your application to work properly, you must wrap it in a
v-appcomponent. If you absolutely cannot wrap your application, you must add corresponding class for your chosen theme. "application--light" or "application--dark".