---
title: "Gravatar"
description: "Use Gravatar in your Nuxt app."
canonical_url: "https://scripts.nuxt.com/scripts/gravatar"
last_updated: "2026-05-03T02:50:07.548Z"
---

[Gravatar](https://gravatar.com) provides globally recognized avatars linked to email addresses. Nuxt Scripts provides a privacy-preserving integration that proxies avatar requests through your own server, preventing Gravatar from tracking your users.

<script-stats>



</script-stats>

<script-docs>



</script-docs>

<callout type="info">

This script's proxy endpoints use [HMAC URL signing](/docs/guides/first-party#proxy-endpoint-security) when you configure a `NUXT_SCRIPTS_PROXY_SECRET`. See the [security guide](/docs/guides/first-party#proxy-endpoint-security) for setup instructions.

</callout>

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

The [`<ScriptGravatar>`](/scripts/gravatar) component renders a Gravatar avatar for a given email address. All requests are proxied through your server - Gravatar never sees your user's IP address or headers.

### 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>

### Component API

See the [Facade Component API](/docs/guides/facade-components#facade-components-api) for full props, events, and slots.

### 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>
      Pre-computed SHA256 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 lets you interact with the Gravatar API programmatically.

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

Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to learn more about advanced usage.

<script-types>



</script-types>

## Example

Using the composable to get avatar URLs directly.

```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>
```