Reusable, customizable and fully typed Gravatar component for Vue3 projects.
pnpm add @sauromates/vue-gravatar
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>
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>
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
pnpm test
Licensed under the MIT license