Vue-dapp NPM | npm.io

Vue Dapp

Vue 3 library for building Dapps with ethers.js.

Documentation

Features

Written in TypeScript for safe and efficient development.
Demo written and bundled using Vite
Ethers.js for interacting with Ethereum.
Multicall2 for calling multiple constant function into one request.

Quick Start

Install dependencies:

yarn add ethers vue-dapp

Add plugin to your app:

import { VueDapp } from 'vue-dapp'

const app = createApp(App)

app.use(VueDapp, {
  infuraId: '...', // optional: for enabling WalletConnect
})
...

Add the global component to your App.vue:

<vdapp-board />

Use board, wallet, and ethers from your setup:

import { defineComponent } from 'vue'
import {
  useBoard,
  useEthers,
  useWallet,
  displayChainName,
  displayEther,
  shortenAddress,
} from 'vue-dapp'

export default defineComponent({
  name: 'App',
  setup() {
    const { open } = useBoard()
    const { status, disconnect, error } = useWallet()
    const { address, balance, chainId, isActivated } = useEthers()

    return {
      isActivated,
      address,
      status,
      error,
      chainId,
      balance,
      open,
      disconnect,
      displayEther,
      displayChainName,
      shortenAddress,
    }
  },
})

Optional: add CDN in index.html for enabling WalletConnect:

<body>
  <div id="app"></div>

  <!-- this line -->
  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.6.5/dist/umd/index.min.js"></script>
  <script type="module" src="/src/main.ts"></script>
</body>

Contributing

Thanks for being interested in contributing to this project!

Just submit your changes via pull request and I will review them before merging.

If you are making a fix on the project, you can use the main branch and send a pull request.

If you are adding a new features, please create a new branch with a name describing your feature (my-new-feature), push to your branch and then submit a pull request.

Vue Dapp

Features

Quick Start

Contributing

Inspiration

License