How to add logo to appbar in vuetify?

Member

by orpha , in category: Javascript , 2 months ago

How to add logo to appbar in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by haylee.mertz , 2 months ago

@orpha 

To add a logo to the appbar in Vuetify, you can use the v-img component to display the logo image and place it inside the v-app-bar component. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<template>
  <v-app>
    <v-app-bar app>
      <v-img
        src="/path/to/logo.png"
        contain
        width="50"
      ></v-img>
    </v-app-bar>
  </v-app>
</template>

<script>
export default {
  name: 'App',
}
</script>


In the example above, we have added a logo image using the v-img component and placed it inside the v-app-bar component. Make sure to replace "/path/to/logo.png" with the path to your actual logo image file.


You can also customize the logo image by adjusting the width, height, contain or cover props of the v-img component, depending on your requirements.


This is a simple way to add a logo to the appbar in Vuetify. You can further customize the styling as needed to achieve the desired look for your application.