Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue gravatar

Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A dead-simple gravatar component for VueJS applications. Gravatar is a service for avatars, its included by default in the WordPress CMS.

This Vue component lets you include a gravatar image into your Vue App. This includes all types of gravatars: wavatar, identicon, retro etcetera.

NPM Version:


vue gravatar


yarn add vue-gravatar


Register the component

import Vue from 'vue';
import Gravatar from 'vue-gravatar';

Vue.component('v-gravatar', Gravatar);

You may now use the component in your markup

<v-gravatar email="[email protected]" />


The following props are available:

  • hash (type: String) md5 hash of the gravatar
  • email (type: String) email address of the gravatar (used when md5 hash not given)
  • size (type: Number, default: 80) size of the avatar
  • default-img (type: String, default: \’retro\’) default image type (see. http://en.gravatar.com/site/implement/images/)
  • rating (type: String, default: \’g\’) rating of the image (see. http://en.gravatar.com/site/implement/images/)
  • alt (type: String, default: \’Avatar\’) The alternative text of the image


<v-gravatar hash="f3ada405ce890b6f8204094deb12d8a8" alt="Nobody" :size="200" default-img="mm" />


The MIT License (MIT) - See file ‘LICENSE’ in this project

Github: http://github.com/JiriChara/vue-gravatar#readme

← ly tab vue tiny slider →

© vuejsexamples.net - Privacy Policy - Cookie Policy