v-avatar

# Guía

# 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

# Como componente de Vue



 




 








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

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

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

# Global en vue

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

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

Vue.use(vAvatar)

`nuxt.config.js``



 



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

pages/**/*.vue

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

El componente se autoinstala en entornos de navegadro

<!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>

# Propiedades

Nombre Requerido Tipo Por defecto
username ❌ String 'V-A'
initials ❌ String -
inline ❌ Boolean false
src ❌ String -
:customStyle ❌ Object -
backgroundColor ❌ String -
color ❌ String -
:lighten ❌ Number 80
:size ❌ Number 50
:rounded ❌ Boolean false

# Build Setup

# install dependencies
npm install

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

# build
npm run build

# Pruebas unitarias

# Test con mocha y chai
npm test

Demo →