# Layouts

Build beautiful user experiences with customizable and expansive layout options.

# Usage

Vuetify comes with a built-in layout system that just works out of the box. Components such as v-app-bar and v-footer support a special property named app. This property tells Vuetify that the corresponding component is part of your application’s layout. In this section you will learn the basics of how the layout system works, how to combine multiple layout components, and how to change them all dynamically.

There are 2 primary layout components in Vuetify, v-app and v-main. The v-app component is the root of your application and a direct replacement for the default Vue entrypoint, <div id="app">. The v-main component is a semantic replacement for the main HTML element and the root of your application’s content. When Vue mounts to the DOM, any Vuetify component that is part of the layout registers its current height and/or width with the framework core. The v-main component then takes these values and adjusts its container size.

To better illustrate this, let’s create a basic Vuetify layout:

<v-app>
  <v-main>
    Hello World
  </v-main>
</v-app>

With no layout components in the template, v-main doesn’t need to adjust its size and instead takes up the entire page. Let’s change that by adding a v-app-bar above the v-main element:

<v-app>
  <!-- Must have the app property -->
  <v-app-bar app></v-app-bar>

  <v-main>
    Hello World
  </v-main>
</v-app>

Because we gave v-app-bar the app prop, Vuetify knows that it is part of the layout. v-main then takes the registered height of our bar and removes the same amount from its available content area—in this case 64px of space is removed from the top of v-main's container.

As a final touch, let’s add a gutter by wrapping the content in a v-container component:

<v-app>
  <v-app-bar app></v-app-bar>

  <v-main>
    <v-container>
      Hello World
    </v-container>
  </v-main>
</v-app>

Up next, we take our newly established baseline and enhance it with new layout components and customization options.

# Combining layout components

More to follow

# Dynamic layouts

More to follow

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/29/2020, 3:45:21 AM