- 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>
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 draweredit
Permanent navigation drawers are default open. These are used for applications that are desktop only and are not openable or closeable.
#3 Permanent clipped draweredit
A clipped drawer rests under the application toolbar.
#4 Permanent floating draweredit
A floating drawer has no visible container (no border-right).
#5 Permanent floating drawer in a cardedit
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 mimiced on the persistent drawer when on mobile. Clicking outside of the drawer will cause it to close.
#8 Dark themeedit
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.