vue-initials-placeholder

vue-initials-placeholder

A vue component that uses parsed initials as placeholders. Can be used as a substitute for absent user profile photo.

Installation

# yarn
yarn add vue-initials-placeholder

# npm
npm i --save vue-initials-placeholder

Usage

<script>
import VueInitialsPlaceholder from 'vue-initials-placeholder.vue'

export default {
  components: {
    VueInitialsPlaceholder
  }
}
</script>

<template>
  <div>
    <VueInitialsPlaceholder value="Emmanuel Raymond"/>
  </div>
</template>

Props

Name	Type	Default	Description	Required
value	String	null	The name you want to parse as placeholder	true
bgColor	String	#4285F4	Background color - [color name, rgb or hex]	false
size	String	40	The width and height of the container that contains the initials in px	false
textColor	String	#fff	Text color of the initials - [color name, rgb or hex]	false
fontSize	String	18	Font size of the initials in px	false

Acknowledgement

This package was inspired by Initials-placeholder-react

Contributing

If you would like to report bugs or request a feature, please create a new issue.

If you'd like to contribute to the code:

• Fork it!
• Create your feature branch: git checkout -b feature-name
• Commit your changes: git commit -am 'Some commit message'
• Push to the branch: git push origin feature-name
• Submit a pull request!

License

This project is released under the terms of the MIT License