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:

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

🚀 Quick start

For more detailed usage instructions see the usage.

<template>
   <Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />
</template>

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

Usage

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

   Vite, Vue CLI, etc.

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

   Nuxt

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

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

   Browser

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

2. Then, you can import the component:

   Composition API

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

   Options API

   import Web3Avatar from 'web3-avatar-vue';
   
   new Vue({
      ...
      components: {
         Web3Avatar
      },
      ...
   })

   Browser

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

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

   <Web3Avatar address="0x11Ed0AC7D6142481E459B6e5d4bfB5646277796f" />

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | address | String | null | Ethereum address |

Test

npm run test # or yarn test

License

Released under the MIT License.