@nival/avuetar

A simple avatar component for vue 3
1,712
Install
npm install @nival/avuetar@0.42.12
Latest Version:0.42.12
Vue:3
License:ISC
Last Updated:Oct 22, 2022
Links: npm
Maintainer: niv.inc

aVuetar

Vue 3 implementation of Avvvatars. Demo here

Installation

Using NPM or Yarn.

  npm i @nival/avuetar
  yarn add @nival/avuetar

Usage

Register the component globally.

import aVuetar from '@nival/avuetar'

ceateApp(App).use(aVuetar)

The you can use it in your template

<Avuetar value="42" />

Props:

value: string
displayValue?: string 
size?: number
shadow?: boolean
style?: 'character | shape'
border?: boolean
borderSize?: number
borderColor?: string
radius?: number

value: The value you wish to initialize the seeder.

displayValue: Optional parameter which lets you define a different display value different from value. It makes sense only when using style="character".

size: The number of pixels you wish your avatar to have.

shadow: Applies box-shadow if it is set to true.

style: Use 'shape' to use one of the shapes, character or empty if you want to display two letters.

border: Applies a border if it is set to true.

borderSize: Size in pixels of the border

borderColor: Hex color code of the border.

radius: Size in pixel of the border radius.

Related Packages

avvvatars-vue

generates unique placeholder avatars with either characters or shapes for your v...

47,585 33
vue-avatar-sdh

An avatar component for vue.js same as vue-avatar only written on Vue3 and TypeS...

3,259 2
vue-boring-avatars

vue-boring-avatars is a Vue.js port of Boring Avatars, a JS library that generat...

2,151,679 126
tronche

Tronche generates custom, SVG-based avatars from any username and color palette....

0 1
markdown-to-jsx

A very fast and versatile markdown toolchain. AST, React, React Native, SolidJS,...

200,072,413 2,394

Version History

Version Released Vue License
0.42.12 ^3.2.21 ISC
Pre-releases (1)
Version Released Vue License
0.42.1-2.1 ^3.2.21 ISC