how to use avatar in vue 3 with shadcn ui

How to Use Avatar in Vue 3 with Shadcn UI

VueJS
17/10/23
Webvees

In this tutorial, we'll walk you through creating a avatars in Vue 3 using Shadcn-Vue. However, before we get started, ensure that you've installed and configured Shadcn UI in your Vue 3 project.

How to Use Shadcn UI in Vue 3

To use Avatar you need to shadcn-vue add avatar.

npx shadcn-vue@latest add avatar
# or
npx shadcn-vue@latest add


 1. Creating Vue 3 Basic Avatar with Shadcn-Vue Components: Avatar, AvatarFallback, AvatarImage.

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>
shadcn-vue component avatar

shadcn-vue component avatar

 2. Creating Vue 3 with Shadcn-Vue Avatars in Small, Medium, and Large Sizes.

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
</script>

<template>
  <div class="flex space-x-4">
    <Avatar class="w-8 h-8">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-12 h-12">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-16 h-16">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-20 h-20">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </div>
</template>
shadcn-vue component avatar sizes

shadcn-vue component avatar sizes

3. Creating Custom Borders and Border Colors for Avatars in Vue 3 with Shadcn-Vue.

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
</script>

<template>
  <div class="flex space-x-4">
    <Avatar class="w-12 h-12 border-2 border-blue-600">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-12 h-12 border-2 border-green-600">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-12 h-12 border-2 border-red-600">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar class="w-12 h-12 border-2 border-yellow-600">
      <AvatarImage src="https://github.com/radix-vue.png" alt="shadcn-vue avatar" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </div>
</template>
shadcn-vue avatar

shadcn-vue avatar