ProfileAvatar

Install

Run the following command to install the profile avatar block:

npx acc-nuxt add ProfileAvatar

Preview

<AcceleratorBlocksProfileAvatar />

<AcceleratorBlocksProfileAvatar editable />

<template>
  <AcceleratorBlocksProfileAvatar
    editable
    mode="local"
    @error="avatarError = $event.message"
    @avatar-file-change="avatarError = undefined"
  />
  <p v-if="avatarError" role="alert">{{ avatarError }}</p>
</template>

<script setup lang="ts">
const avatarError = ref<string>();
</script>

Profile data

Without a userUuid, the block reads the current authenticated user's profile with useProfile(). Pass a UUID to load another profile when the authenticated user has permission to access it.

When the profile contains an avatarKey, useProfile() resolves the private CDN URL as userProfile.avatarUrl. The user's first and last name initials are used when no avatar key or private URL is available.

In editable mode, an authenticated user can select one image and preview it locally. The avatar-file-change event provides the selected file information to a containing form to upload or remove; the block does not submit profile changes itself.

Use mode="local" with editable for invitation forms. This skips profile fetching and allows image selection, preview, and removal without signing in. The preview is preserved when auth state changes. Keep the file from avatar-file-change and upload it after confirmInvite() succeeds.

Dropzone validation errors are emitted as error with a reason, message, and optional file name. Invalid files are rejected without changing the current preview. Render the message in the containing form; the custom avatar trigger does not show Dropzone's built-in error UI. Set dropzoneProps.maxFileSize to enforce a file-size limit.

Props

Bindings

Emits