Vuetify App Bar too tall - takes up half the screen

Question

When I have an otherwise empty app with a v-app-bar inside of the v-app container, the app bar takes up half of the page.

<v-app>

  <v-app-bar color="deep-purple" dark >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

Demo in Codepen

I've tried adding options for dense, short, & height but they don't seem to have any affect.

The docs have plenty of code samples with this exact App Bar markup, so I'm trying to figure out what's going wrong.

Answer 1

You need to add the app property to v-app-bar like this:

<v-app>

  <v-app-bar color="deep-purple" dark app >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

The key here is all child elements in the App component must indicate whether they should use the app layout

From Vuetify > Components > Application > Default Markup:

You can place your layout elements anywhere, as long as you apply the app property.

From Vuetify > Components > App Bar > API:

app
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content component to function properly.

Answer 2

Add the class="flex-grow-0" to your app-bar. This will prevent your problem.