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.