@craydel/craydel-avatar

CraydelAvatar

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-avatar

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelAvatar from '@craydel/craydel-avatar/src/CraydelAvatar.vue'

const Components = {
  CraydelAvatar,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
photo	string	undefined	Sets the avatar as an image.
display-name	string	undefined	Generates a random color that is applied to the avatar based on the display-name.
acronym	string	undefined	Sets the avatar as an acronym.
size	number | string	40	Sets the height and width of the component.
attrs	object	undefined	Used for binding to an activator.
on	object	undefined	Used for binding to an activator.

 

Usage

An example showing an avatar that will display the initials 'JD'.

<craydel-avatar
        display-name="John Doe"
        acronym="JD"
></craydel-avatar>