vue-avatars2 v2.3.3

vue-avatars

An avatars component for vue.js.

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

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

Reference resources GITHUB:https://github.com/eliep/vue-avatar

Installation

npm install vue-avatars

Version

Usage

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

ES6

import avatars from 'vue-avatars'

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

After that, you can use it in your templates:

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

CommonJS

var Vue = require('vue')
var avatars = require('vue-avatars')

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

Browser

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

new Vue({
  ...
  components: {
    'avatars': Vueavatars.avatars
  },
  ...
})

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.