2.3.3 • Published 4 years ago

vue-avatar v2.3.3

Weekly downloads
19,496
License
MIT
Repository
github
Last release
4 years ago

vue-avatar

Build Status

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 versionvue-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.