Vue Profile Picture

Lightweight vue component to render the user picture or his name initials It's easy to customize with your style and change the behavior using the properties of the component.

Instalation

To install the package in your project you can type:

• npm i @luanedcosta/vue-profile-picture
• yarn add @luanedcosta/vue-profile-picture
• Or download it from the repository: https://github.com/LuanEdCosta/vue-profile-picture

Once installed you can use the component as a plugin:

There's no options, so you can ignore the second parameter of Vue.use()

import VueProfilePicture from '@luanedcosta/vue-profile-picture'

Vue.use(VueProfilePicture)

Or you can import the component locally:

import { VueProfilePicture } from '@luanedcosta/vue-profile-picture'

export default {
    components: { VueProfilePicture }
}

Simple Usage

If exists an image the component will render a <img> tag. If the user doesn't have an image his initials will appear in place of the image.

<vue-profile-picture name="Username" img="Image src"/>

Props

The table below contains all component props.

Property	Type	Default	Required	Explanation
name	String		true	Name of the user
classes	String	null	false	HTML class property for the <img> tag or <div> with the initials
styles	Object	null	false	HTML style property for the <img> tag or <div> with the initials
noStyle	Boolean	false	false	Remove all default component classes to allow you to define your own css classes
numOfInitials	Number	2	false	Number of letters that will appear with the user doesn't have image
nameSeparator	String	white space	false	Character or string that separates each user name
transform	Number	1	false	1 = Initials uppercase; 2 = Initials lowercase; 0 = Don't transform the text
firstName	Boolean	false	false	The component will show only the firstname initials
lastName	Boolean	false	false	The component will show only the lastname initials
def	String	'-'	false	If the component didn't find an image neither the user name the component will display this property value on screen
img	String	null	false	The src for the image. The same as the src property of the <img> tag
alt	String	null	false	The same as alt property of the <img> tag
draggable	String	"true"	false	If true the image can be draggable