UI Development with Chakra UI Vue — Avatars

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Avatars

Chakra UI Vue comes with an avatar component.

For instance, we can write:

<template>
  <c-box>
    <c-avatar name="dog" src="https://picsum.photos/id/237/200" />
  </c-box>
</template>
<script>
import { CAvatar, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CBox,
  },
};
</script>

to register the CAvatar component to add an avatar image.

The src prop has the URL of the image.

name has the text description of the image.

We can set the size prop to set its size.

The possible values are 2xs, xs, sm, md, lg xl and 2xl , with 2xs being the smallest and 2xl being the largest.

So we can write:

<template>
  <c-box>
    <c-avatar size="lg" name="dog" src="https://picsum.photos/id/237/200" />
  </c-box>
</template>
<script>
import { CAvatar, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CBox,
  },
};
</script>

to make the avatar bigger than the default.

We can add a badge to the bottom right corner of the avatar with the CAvatarBagde component:

<template>
  <c-box>
    <c-avatar size="lg" name="dog" src="https://picsum.photos/id/237/200">
      <c-avatar-badge size="1.0em" bg="green.500" />
    </c-avatar>
  </c-box>
</template>
<script>
import { CAvatar, CAvatarBadge, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CAvatarBadge,
    CBox,
  },
};
</script>

size sets the size and bg sets the background color.

Conclusion

We can add an avatar easily into our Vue app with Chakra UI Vue.