vue-avatar

An avatar component for vue.js.

This component display an avatar image and if none is provided fallback to the user initials. This component is highly inspired from react-user-avatar.

Rules used to compute user initials:

• divide the username on space and hyphen
• use the first letter of each parts
• never use more than three letters as initials
• if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.

You can find a few examples and the documentation here

Installation

npm install vue-avatar

Version

| Vuejs version | vue-avatar version | | ------------- | ----------------- | | ^1.0.18 | ^1.3.0 | | ^2.0.0 | ^2.0.0 |

Usage

vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.

ES6

import Avatar from 'vue-avatar'

export default {
  ...
  components: {
    Avatar
  },
  ...
}

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>

CommonJS

var Vue = require('vue')
var Avatar = require('vue-avatar')

var YourComponent = Vue.extend({
  ...
  components: {
    'avatar': Avatar.Avatar
  },
  ...
})

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>

new Vue({
  ...
  components: {
    'avatar': VueAvatar.Avatar
  },
  ...
})

Props

Event

Build Setup

# install dependencies
npm install

# serve gh pages with hot reload at localhost:8080/gh-pages/index.html
npm run dev

# build
npm run bundle

Test

npm test

License

Released under the MIT License.