Vuetify 3 Vue 3 Avatars Example

Vuetify 3 Vue 3 Avatars Example

In this tutorial, we’ll explore how to use Vuetify.js 3 with Vue.js 3 Avatar components. We’ll cover avatars with icons, avatar images, avatar sizes, and more. First, we’ll install and configure Vuetify 3 to get started.

How to Install Vuetify 3 in Vue 3

Vuetify 3 Vue 3 Avatars Example

1. To create full-circle avatars with colors using the v-avatar component in Vuetify 3, you can use the color prop.

Vue
<template>
  <div>
    <v-avatar color="surface-variant">Wv</v-avatar>
    <v-avatar color="success">Wv</v-avatar>
    <v-avatar color="primary">Wv</v-avatar>
    <v-avatar color="error">Wv</v-avatar>
    <v-avatar color="warning">Wv</v-avatar>
    <v-avatar color="black">Wv</v-avatar>
  </div>
</template>
vuetify 3 circle avatars component

2. To create full box avatars with square corners using the v-avatar component in Vuetify 3, you can set the rounded prop to “0”.

Vue
<template>
  <div>
    <v-avatar rounded="0" color="surface-variant">Wv</v-avatar>
    <v-avatar rounded="0" color="success">Wv</v-avatar>
    <v-avatar rounded="0" color="primary">Wv</v-avatar>
    <v-avatar rounded="0" color="error">Wv</v-avatar>
    <v-avatar rounded="0" color="warning">Wv</v-avatar>
    <v-avatar rounded="0" color="black">Wv</v-avatar>
  </div>
</template>
vuetify 3 box avatars component

3. Vuetify 3 avatars with icons using v-avatar component.

Vue
<template>
  <div>
    <v-avatar icon="mdi-vuetify"></v-avatar>
    <v-avatar icon="mdi-vuetify" color="success"></v-avatar>
    <v-avatar icon="mdi-vuetify" color="error"></v-avatar>
    <v-avatar icon="mdi-vuetify" color="info" rounded="0"></v-avatar>
    <v-avatar icon="mdi-vuetify" color="black" rounded="0"></v-avatar>
  </div>
</template>
vue 3 vuetify 3 avatar with icons

4. Vuetify 3 avatars with image using v-avatar component and image.

Vue
<template>
  <div>
    <v-avatar
      image="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
    ></v-avatar>
    <v-avatar
      image="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
      color="success"
    ></v-avatar>
    <v-avatar
      image="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
      color="error"
    ></v-avatar>
    <v-avatar
      image="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
      color="info"
      rounded="0"
    ></v-avatar>
    <v-avatar
      image="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
      color="black"
      rounded="0"
    ></v-avatar>
  </div>
</template>
vuetify 3 avatars with images

5. Vuetify 3 avatars size 32, 48, 64.

Vue
<template>
  <div class="d-flex align-center justify-space-around">
    <v-avatar color="primary" size="x-small"> 32 </v-avatar>

    <v-avatar color="secondary"> 48 </v-avatar>

    <v-avatar color="info" size="x-large"> 64 </v-avatar>
  </div>
</template>
vuetify 3 avatars size 32, 48, 64.

6. Vuetify 3 avatar slot allows you to render content such as v-icon components, images, or text.

Vue
<template>
  <v-row justify="space-around">
    <v-avatar color="info">
      <v-icon icon="mdi-account-circle"></v-icon>
    </v-avatar>

    <v-avatar>
      <v-img
        src="https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108__340.png"
        alt="dog"
      ></v-img>
    </v-avatar>

    <v-avatar color="red">
      <span class="text-h5">wv</span>
    </v-avatar>
  </v-row>
</template>
Vuetify 3 avatar slot

7. Vuetify 3 using avatar component to create profile card.

Vue
<template>
  <v-card
    class="mx-auto"
    max-width="434"
    rounded="0"
  >
    <v-img
      height="100%"
      cover
      src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
    >
      <v-avatar
        color="grey"
        size="150"
        rounded="0"
      >
        <v-img cover src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
      </v-avatar>
      <v-list-item
        class="text-white"
        title="Marcus Obrien"
        subtitle="Network Engineer"
      ></v-list-item>
    </v-img>
  </v-card>
</template>
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Tags
Share link