How to add logo to AppBar in Vuetify?

Question

I have a v-app-bar control, and I'm trying to add a logo/image to it.

Is there a standard approach in Veutify for adding a logo to the AppBar?

Answer 1

You can add a v-img component like this:

<v-app-bar color="light-blue lighten-3" app>

  <v-img
    class="mx-2"
    src="https://i.imgur.com/qgGY4tB.png"
    max-height="40"
    max-width="40"
    contain
  ></v-img>

  <v-toolbar-title class="ml-2">
    Page title
  </v-toolbar-title>

</v-app-bar>

It's important to set a max-height and max-width, otherwise the image will overflow the nav vertically and push over the title horizontally. And also set contain to preserve the aspect ratio

Demo in CodePen

Note: If you're using Nuxt/Webpack, etc, you might need to build the image path with something like this: :src="require('~/assets/logo.png')"

Answer 2

Use v-avatar with a tile property set to true, just like this:

<v-avatar :tile="true">
  <img :src="require('@/assets/logo.png')" alt="logo">
</v-avatar>

The full v-app-bar example:

<v-app-bar app light>
  <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  <v-avatar :tile="true">
    <img :src="require('@/assets/logo.png')" alt="logo">
  </v-avatar>
  <v-toolbar-title>Header text</v-toolbar-title>
</v-app-bar>