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
🚀 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
-
First, you need to import the style.css
file which contains the styles for the component.
Vite, Vue CLI, etc.
import 'web3-avatar-vue/dist/style.css';
Nuxt
Add the style.css
file to the css
array in your Nuxt config file:
export default defineNuxtConfig({
...
css: ['web3-avatar-vue/dist/style.css'],
...
})
Browser
<link rel="stylesheet" href="https://unpkg.com/web3-avatar-vue/dist/style.css">
-
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
<script src="https://unpkg.com/web3-avatar-vue"></script>
-
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
License
Released under the MIT License.