---
title: "Gravatar"
description: "Render server-hashed, proxied Gravatar images from an email or hash."
canonical_url: "https://scripts.nuxt.com/scripts/gravatar"
last_updated: "2026-08-10T04:32:16.468Z"
---

[Gravatar](https://gravatar.com) provides globally recognized avatars linked to email addresses. Its [avatar API](https://docs.gravatar.com/sdk/images/) uses a SHA-256 hash of the normalized email address. Nuxt Scripts creates that hash on your server and proxies the image request.

<script-stats>



</script-stats>

<script-docs>



</script-docs>

## [`<ScriptGravatar>`](/scripts/gravatar)

The [`<ScriptGravatar>`](/scripts/gravatar) component renders a Gravatar avatar for a given email address. The avatar image request is proxied through your server, so Gravatar does not receive the user's IP address from that request.

Passing `email` puts the raw address in the same-origin image URL before the server hashes it. That URL can appear in browser, CDN, and server access logs. Pass a precomputed `hash` when the address should not enter those logs.

<callout type="warning">

The integration also loads Gravatar's `gprofiles.js` directly for hovercard support, even when `hovercards` is `false`. The browser therefore still connects to Gravatar.

</callout>

### Demo

<code-group>
<gravatar-demo label="Output">



</gravatar-demo>

```vue [Input]
<template>
  <ScriptGravatar
    email="info@gravatar.com"
    :size="80"
    class="rounded-full"
  />
</template>
```

</code-group>

### Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        email
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      Email address, sent to your server proxy for hashing, not sent to Gravatar
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hash
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      Precomputed SHA-256 hash of the email (alternative to <code>
        email
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      Avatar size in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'mp'
      </code>
    </td>
    
    <td>
      Default avatar style when no Gravatar exists
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rating
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'g'
      </code>
    </td>
    
    <td>
      Content rating filter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hovercards
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Enable hovercards on hover
    </td>
  </tr>
</tbody>
</table>

## [`useScriptGravatar()`](/scripts/gravatar)

The [`useScriptGravatar()`](/scripts/gravatar) composable builds proxied avatar URLs from an email address or hash.

```ts
export function useScriptGravatar<T extends GravatarApi>(_options?: GravatarInput) {}
```

See [Registry Scripts](/docs/guides/registry-scripts) for trigger and loading options.

<script-types>



</script-types>

## Example

Build an avatar URL after the Gravatar script loads:

```vue
<script setup lang="ts">
const { onLoaded } = useScriptGravatar()

const avatarUrl = ref('')

onLoaded((api) => {
  avatarUrl.value = api.getAvatarUrlFromEmail('user@example.com', { size: 120 })
})
</script>

<template>
  <img v-if="avatarUrl" :src="avatarUrl" alt="User avatar">
</template>
```