vue-dapp v0.5.0-beta.0

Vue Dapp

• Documentation (v0.5.x)
• Migrate to v0.5.x

Installation

yarn add ethers vue-dapp

Installation

yarn

yarn add ethers vue-dapp

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. add plugin to your app:

import { VueDapp } from 'vue-dapp'

const app = createApp(App)

app.use(VueDapp)
...

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

<vdapp-board :connectors="connectors" dark />

Step 3. construct your connectors and use composable functions in your scripts:

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

const infuraId = 'your-infura-id'

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

const connectors = [
  new MetaMaskConnector({
    appUrl: 'http://localhost:3000',
  }),
  new WalletConnectConnector({
    qrcode: true,
    rpc: {
      1: `https://mainnet.infura.io/v3/${infuraId}`,
      4: `https://rinkeby.infura.io/v3/${infuraId}`,
    },
  }),
  new CoinbaseWalletConnector({
    appName: 'Vue Dapp',
    jsonRpcUrl: `https://mainnet.infura.io/v3/${infuraId}`,
  }),
]

For more details, see https://github.com/chnejohnson/vue-dapp/blob/main/demo/src/App.vue

Sponsor

Gitcoin Grants: https://gitcoin.co/grants/3987/vue-dapp

License

MIT

Copyright (c) 2021-present, Johnson Chen