kjpou1 / vue-dapp

Vue 3 library for building Dapps on Ethereum.

Vue Dapp

• Documentation (v0.4.9-beta.0)

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.

Installation

yarn add vue-dapp ethers

Quick Start

• If you're using Vite, please check out Using Vite for more details on environment settings.
• Use vue3-dapp-starter for a fast startup.

Step 1. Adding plugin to your app:

import { VueDapp } from 'vue-dapp'

const app = createApp(App)

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

Step 2. Adding global component <vdapp-board /> to your App.vue:

<vdapp-board />

Step 3. Using composable functions in your script:

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

const { open } = useBoard()
const { status, disconnect, error } = useWallet()
const { address, balance, chainId, isActivated } = useEthers()

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.

Inspiration

• useDapp: Framework for rapid Dapp development.
• vue-tailwind-ethereum-template
• web3Modal: A single Web3 / Ethereum provider solution for all Wallets
• vue3-eth: Vue3 library for building Dapps in an ES module environment

License

MIT

Copyright (c) 2021-present, Johnson Chen