{"id":12408,"library":"vue-boring-avatars","title":"Vue Boring Avatars","description":"vue-boring-avatars is a dedicated Vue 3 library that generates customizable, SVG-based user avatars. It is a direct port of the popular `Boring Avatars` JavaScript library, ensuring API parity with its React counterpart. Currently at stable version `1.4.0`, the library demonstrates an active release cadence, frequently updating to match new features and improvements introduced in the upstream `Boring Avatars` project. Key differentiators include its full support for Vue 3 and TypeScript, the provision of type definitions out-of-the-box, and robust accessibility features, such as `role` and `title` attributes for generated SVGs. It offers various avatar patterns (bauhaus, beam, marble, pixel, ring, sunset) and allows extensive customization through name, size, square shape, and color palettes, making it a flexible choice for profile picture generation.","status":"active","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/mujahidfa/vue-boring-avatars","tags":["javascript","vue","vue3","Vue 3","avatar","gravatar","profile picture","user avatar","avatar generator","typescript"],"install":[{"cmd":"npm install vue-boring-avatars","lang":"bash","label":"npm"},{"cmd":"yarn add vue-boring-avatars","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-boring-avatars","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary component and the recommended ESM import for Vue 3 projects.","symbol":"Avatar","correct":"import Avatar from 'vue-boring-avatars';"},{"note":"This CommonJS `require` syntax is generally incompatible with Vue 3's ESM-first approach unless specifically targeting the UMD build or using a bundler that handles CJS-ESM interop.","wrong":"const Avatar = require('vue-boring-avatars');","symbol":"Avatar"},{"note":"When using Vue 3's `<script setup>`, the imported component is automatically made available in the template without explicit registration.","symbol":"Avatar (in <script setup>)","correct":"<!-- In a Vue SFC with <script setup> -->\n<script setup>\nimport Avatar from 'vue-boring-avatars';\n</script>"}],"quickstart":{"code":"<template>\n  <input type=\"text\" v-model=\"name\" placeholder=\"Enter name\" />\n  <input type=\"number\" v-model.number=\"size\" min=\"20\" max=\"200\" placeholder=\"Enter size\" />\n\n  <h3>Bauhaus Variant</h3>\n  <Avatar :size=\"size\" variant=\"bauhaus\" :name=\"name\" :colors=\"['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']\" />\n\n  <h3>Beam Variant (Square, with title)</h3>\n  <Avatar :size=\"size\" variant=\"beam\" :name=\"name\" :square=\"true\" :title=\"true\" :id=\"'beam-avatar'\" />\n\n  <h3>Marble Variant (Default)</h3>\n  <Avatar :size=\"size\" variant=\"marble\" :name=\"name\" />\n\n  <h3>Pixel Variant</h3>\n  <Avatar :size=\"size\" variant=\"pixel\" :name=\"name\" :square=\"true\" :title=\"true\" />\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport Avatar from 'vue-boring-avatars';\n\nexport default defineComponent({\n  name: 'AvatarDemo',\n  setup() {\n    const name = ref('Clara Barton');\n    const size = ref(80);\n\n    return {\n      name,\n      size\n    };\n  },\n  components: {\n    Avatar\n  }\n});\n</script>","lang":"typescript","description":"This example demonstrates how to integrate and use the `Avatar` component with various props in a Vue 3 Composition API setup, including dynamic name and size, different variants, and accessibility features."},"warnings":[{"fix":"Ensure your project is running Vue 3. If you require a Vue 2 compatible version, consider using alternative implementations like `vue2-boring-avatars`.","message":"This library is strictly designed for Vue 3. Attempting to use `vue-boring-avatars` within a Vue 2 project will lead to runtime errors due to incompatible component APIs and lifecycle hooks.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always provide the `name` prop with a unique string (e.g., from user data) and the `colors` prop with your custom color array for consistent and dynamic avatar generation.","message":"The `name` prop defaults to 'Clara Barton' and `colors` to a specific palette if not explicitly provided. For truly dynamic or empty avatars, always pass a unique `name` string and your desired `colors` array.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For modern browser environments supporting ES modules, use `<script type=\"module\" src=\".../vue-boring-avatars.js\">`. For older environments or when bundling with CJS, use the UMD version or rely on npm/yarn/pnpm installations with appropriate bundler configurations.","message":"When using CDN, ensure you choose the correct bundle. `vue-boring-avatars.js` is for ESM environments, while `vue-boring-avatars.umd.cjs` is for UMD/CommonJS environments. Mixing them or using the wrong one for your setup can lead to module resolution issues.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"search_vec":"'1.4.0':45 '3':12,76,138 'access':91 'activ':50 'allow':114 'api':35 'attribut':98 'avatar':3,7,21,31,66,105,139,144,145 'base':19 'bauhaus':107 'beam':108 'bore':2,6,30,65 'box':88 'cadenc':52 'choic':129 'color':123 'counterpart':40 'current':41 'custom':116 'customiz':16 'dedic':10 'definit':83 'demonstr':48 'differenti':69 'direct':25 'ensur':34 'extens':115 'featur':58,92 'flexibl':128 'frequent':53 'full':72 'generat':15,100,133,146 'gravatar':140 'improv':60 'includ':70 'introduc':61 'javascript':32,134 'key':68 'librari':13,33,47 'make':125 'marbl':109 'match':56 'name':118 'new':57 'offer':103 'out-of-the-box':84 'palett':124 'pariti':36 'pattern':106 'pictur':132,142 'pixel':110 'popular':29 'port':26 'profil':131,141 'project':67 'provis':80 'react':39 'releas':51 'ring':111 'robust':90 'role':95 'shape':121 'size':119 'squar':120 'stabl':43 'sunset':112 'support':73 'svg':18 'svg-base':17 'svgs':101 'titl':97 'type':82 'typescript':78,147 'updat':54 'upstream':64 'user':20,143 'various':104 'version':44 'vue':1,5,11,75,135,137 'vue-boring-avatar':4 'vue3':136","created_at":"2026-04-19T13:43:01.286396+00:00","updated_at":"2026-04-19T13:43:01.286396+00:00","problems":[{"fix":"Ensure `Avatar` is explicitly added to the `components` object in your Vue component options (e.g., `components: { Avatar }`) or, if using `<script setup>`, verify the import path is correct.","cause":"The `Avatar` component was imported but not correctly registered within the Vue application or the parent component's `components` option.","error":"[Vue warn]: Failed to resolve component: Avatar"},{"fix":"For modern Vue 3 development, use `import Avatar from 'vue-boring-avatars';`. If you are in a legacy CommonJS environment, ensure your bundler properly handles ESM-CJS interop, or directly import the UMD bundle from `node_modules/vue-boring-avatars/dist/vue-boring-avatars.umd.cjs`.","cause":"Attempting to use `require()` syntax with the library's primary ESM export in a CommonJS environment, which is not directly compatible without specific bundler configurations or explicit targeting of the UMD build.","error":"TypeError: Cannot read properties of undefined (reading 'setup') (or similar module resolution error when using require())"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/mujahidfa/vue-boring-avatars","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-boring-avatars","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}