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.
<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>
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”.
<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>
3. Vuetify 3 avatars with icons using v-avatar
component.
<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>
4. Vuetify 3 avatars with image using v-avatar
component and image.
<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>
5. Vuetify 3 avatars size 32, 48, 64.
<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>
6. Vuetify 3 avatar slot allows you to render content such as v-icon components, images, or text.
<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>
7. Vuetify 3 using avatar component to create profile card.
<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,