---
prev: false
next: /es/demo/
---
# Guía
[[toc]]
## Instalación
```bash
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
### Como componente de Vue
```vue {3,8}
...
...
```
### Global en vue
```js
import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'
Vue.use(vAvatar)
```
> El componente queda registrado de manera global
## Nuxt
> `./plugins/vAvatar.js`
```js
import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'
Vue.use(vAvatar)
```
> `nuxt.config.js``
```js {3}
module.exports = {
...
plugins: ['~/plugins/vAvatar.js']
...
}
```
> `pages/**/*.vue`
```vue
```
## Navegador
> El componente se autoinstala en entornos de navegadro
```html
```
## Propiedades
| Nombre | Requerido | Tipo | Por defecto |
| --------------- | :-------: | :-----: | :---------: |
| 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
```bash
# install dependencies
npm install
# serve whith hot reload al localhost:8080
npm run serve
# build
npm run build
```
### Pruebas unitarias
```bash
# Test con mocha y chai
npm test
```