Nuxt 3 with Nuxtlabs UI Avatar Example

In this tutorial, we will create avatars in nuxt 3 with Nuxtlabs UI. Before we begin, you need to install and configure Nuxtlabs UI in Nuxt 3.

How to Install Nuxtlabs UI in Nuxt 3

1. Nuxt 3 with Nuxtlabs UI basic avatar using UAvatar component.

Vue

<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />

2. Nuxt 3 with nuxtlabs ui avatar sizes small, medium, large.

Vue

<template>
    <div>
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="xs" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="sm" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="md" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="lg" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="xl" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xl" alt="Avatar" />
        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xl" alt="Avatar" />
    </div>
</template>

3. Nuxt 3 with nuxtlabs ui avatar placeholders.

Vue

<template>
  <div>
    <UAvatar size="3xs" alt="Benjamin Canac" />
    <UAvatar size="2xs" alt="Benjamin Canac" />
    <UAvatar size="xs" alt="Benjamin Canac" />
    <UAvatar size="sm" alt="Benjamin Canac" />
    <UAvatar size="md" alt="Benjamin Canac" />
    <UAvatar size="lg" alt="Benjamin Canac" />
    <UAvatar size="xl" alt="Benjamin Canac" />
    <UAvatar size="2xl" alt="Benjamin Canac" />
    <UAvatar size="3xl" alt="Benjamin Canac" />
  </div>
</template>

4. Nuxt 3 with nuxtlabs ui avatar chip dot position.

Vue

<template>
  <div>
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      size="md"
      chip-color="primary"
      chip-text=""
      chip-position="top-right"
      alt="Avatar"
    />
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      size="md"
      chip-color="red"
      chip-text=""
      chip-position="bottom-right"
      alt="Avatar"
    />
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      size="md"
      chip-color="violet"
      chip-text=""
      chip-position="top-left"
      alt="Avatar"
    />
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      size="md"
      chip-color="gray"
      chip-text=""
      chip-position="bottom-left"
      alt="Avatar"
    />
  </div>
</template>

5. Nuxt 3 with nuxtlabs ui group avatar.

Vue

<template>
    <div>
        <UAvatarGroup size="sm" max="2">
            <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
            <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
            <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
        </UAvatarGroup>
    </div>
</template>