@amaury-tobias/v-avatar

Componente de avatar basado en Vue.js
16,378 1
vue vue-component avatar user
Install
npm install @amaury-tobias/v-avatar
Latest Version:2.0.3
Vue:2
License:MIT
Last Updated:Aug 3, 2021
Links: GitHub  ·  npm
Maintainer: amaury-tobias

v-avatar

Made with vue Made with vue Build Status npm npm bundle size NPM

Componente de Avatar para Vue.js

Este componente esta altamente inspirado y basado en el trabajo de https://github.com/eliep/vue-avatar, para recuperar y mantener un componente de mucha utilidad, agradecimientos totales.

Para el uso del componente es necesario:

  • Dividir el username con espacios y guiones.
  • Utiliza la primer letra de cada palabra del nombre.
  • Utiliza hasta un maximo de tres letras iniciales.
  • Si el nombre esta dividido en mas de tres partes y alguna de esta comienza con mayuscula, saltara aquellas que comienzen en minuscula.

Puedes encontrar algunos ejemplos aquí.

Instalación

npm install @amaury-tobias/v-avatar

Uso

v-avatar es un modulo UMD, por lo que puede ser utilizado en tanto en una instancia de Vue como en Nuxt como en un entorno non-modular donde vAvatar sera registrada como variable global.

VUE COMPONENT

<template>
<div>
  <v-avatar username='John Doe' />
</div>
</template>

<script>
import { vAvatar } from '@amaury-tobias/v-avatar'

export default {
  components: {
    vAvatar
  }
}
</script>

OR GLOBAL

import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'

Vue.use(vAvatar)

NUXT

./plugins/vAvatar.js

import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'

Vue.use(vAvatar)

nuxt.config.js

module.exports = {
  plugins: ['~/plugins/vAvatar.js']
}

*.vue <template>

<v-avatar username="John Doe" />

Browser

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/@amaury-tobias/v-avatar"></script>
  </head>
  <body>
    <div id="app">
      <v-avatar username="Jon Doe"></v-avatar>
    </div>
    <script>
      var app = new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Props

Name Required Type Default
username x String 'V-A'
initials x String -
inline x Boolean false
src x String -
:customStyle x Object -
backgroundColor x String -
color x String -
:lighten x Number 80
:size x Number 50
:rounded x Boolean false

Build Setup

# install dependencies
npm install

# serve whith hot reload al localhost:8080
npm run serve

# build
npm run build

Test

npm test

License

Released under the MIT License.

Related Packages

vue-avatar

Avatar component for Vue.js

466,478 612
avatar user vue
vue-avatar-3

A useful avatar component for Vue 3, with support for letter avatars.

7,661 1
avatar vue vue-component
@alexrafael10/vue-avatar

Avatar component for Vue.js

6,112 2
avatar user vue
vue-json-tree-view

a JSON Tree View Component in Vue.js

380,792 473
vue-component vuejs
@v-c/picker

picker ui component for vue

57,185 32
vue-component picker

Version History

Version Released License
2.0.3 MIT
2.0.2 MIT
2.0.1 MIT
2.0.0 MIT
1.0.5 MIT