VueGravatar

Reusable, customizable and fully typed Gravatar component for Vue3 projects.

Installation

pnpm add @sauromates/vue-gravatar

Usage

Component

Package may be used as a ready-to-go single file component. Below is an example with all possible props provided. Note that only email prop is required to use the component.

<script setup lang="ts">
import { Gravatar } from '@sauromates/vue-gravatar'
</script>

<template>
   <Gravatar
      email="[email protected]"
      alt="User's avatar from Gravatar service"
      default="mp"
      :size="80"
      rating="g"
      force-default="y"
      extension=".jpg"
   />
</template>

Composable

More granular control over a Gravatar implementation may be achieved with useGravatar composable, which is used internally by the component. Note that useGravatar should always be provided with reactive object (usually component props) in order for its watchers to function properly.

<script setup lang="ts">
import { reactive } from 'vue'
import { useGravatar, type GravatarType } from '@sauromates/vue-gravatar'

const config: GravatarType = reactive({
  email: '[email protected]',
  size: 80,
  default: 'mp',
  rating: 'g'
})

const { gravatar: url, size } = useGravatar(config)
</script>

<template>
  <img :src="url" :height="size" :width="size" />
</template>

Playground

Package includes simple Vue 3 application used to demonstrate it's functionality. In order to use a playground, clone this project locally and run it in dev mode.

git clone https://github.com/sauromates/vue-gravatar.git
cd vue-gravatar
pnpm install && pnpm dev

Testing

pnpm test

License

Licensed under the MIT license