vue-avatar v2.3.3
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.
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago