web3-avatar-vue
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

web3 avatar preview image

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.

Package Sidebar

Install

npm i web3-avatar-vue

Weekly Downloads

35

Version

1.0.4

License

MIT

Unpacked Size

13.1 kB

Total Files

11

Last publish

Collaborators

  • jackhamer