Web3 Avatar - Vue component

Web3 Avatar is a lightweight Vue library for generating beautiful gradient avatars from Ethereum addresses. This is Vue version of the library. If you are looking for other versions like React or vanilla JavaScript, please check the main repository. Inspired by Web3 Modal avatar

---

🖥️ Live Demo

See live demo on web3-avatar.netlify.app

---

📦 Installation

You can install the library using npm:

1npm install web3-avatar-vue # or yarn add web3-avatar-vue

---

🚀 Quick start

For more detailed usage instructions see the usage.

1<template>
2   <Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />
3</template>
4
5<script setup>
6import Web3Avatar from 'web3-avatar-vue';
7</script>

---

Usage

1. First, you need to import the style.css file which contains the styles for the component.

   Vite, Vue CLI, etc.

   1// main.js
   2import 'web3-avatar-vue/dist/style.css';

   Nuxt

   Add the style.css file to the css array in your Nuxt config file:

   1/// nuxt.config.js
   2export default defineNuxtConfig({
   3   ... // other config
   4   css: ['web3-avatar-vue/dist/style.css'],
   5   ... // other config
   6})

   Browser

   1<!-- index.html -->
   2<link rel="stylesheet" href="https://unpkg.com/web3-avatar-vue/dist/style.css">

2. Then, you can import the component:

   Composition API

   1<script setup>
   2import Web3Avatar from 'web3-avatar-vue';
   3</script>

   Options API

   1import Web3Avatar from 'web3-avatar-vue';
   2
   3new Vue({
   4   ...
   5   components: {
   6      Web3Avatar
   7   },
   8   ...
   9})

   Browser

   1<!-- index.html -->
   2<script src="https://unpkg.com/web3-avatar-vue"></script>

3. Finally, you can use the component in your template 🎉:

   1<Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />

---

Props

Name	Type	Default	Description
address	String	null	Ethereum address

---

Test

1npm run test # or yarn test

---

License

Released under the MIT License.