vue-gravatar-icon

A Vue 3 component for displaying Gravatar icons with customizable size and default image options.

Installation

npm install vue-gravatar-icon

Usage

Global Registration

import { createApp } from 'vue';
import GravatarIcon from 'vue-gravatar-icon';

const app = createApp(App);
app.component('GravatarIcon', GravatarIcon);
app.mount('#app');

Local Registration

<template>
  <GravatarIcon
    :email="userEmail"
    :size="50"
    default-image="404"
    @error="handleError"
  />
</template>

<script>
import GravatarIcon from 'vue-gravatar-icon';

export default {
  components: {
    GravatarIcon
  },
  data() {
    return {
      userEmail: '[email protected]'
    };
  },
  methods: {
    handleError() {
      console.log('Gravatar image failed to load');
    }
  }
};
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | email | String | "default" | The email address to generate the Gravatar for | | size | Number/String | 30 | The size of the avatar (24-2048 pixels) | | defaultImage | String | "404" | Default image option when Gravatar is not found |

Events

| Event | Description | |-------|-------------| | error | Emitted when the Gravatar image fails to load |

License

MIT