Vue Dapp

Vue 3 library for building Dapps on Ethereum.

Documentation

• Documentation
• Migrating to v0.5.x

Installation

yarn add ethers vue-dapp

Quick Start

Step 1. Add plugin to your app:

import { VueDapp } from "vue-dapp";
const app = createApp(App);
app.use(VueDapp);
app.mount("#app");

Step 2. Add <vd-board /> to your App.vue and add a button to open the board:

<button @click="open">Connect Wallet</button>
<vd-board :connectors="connectors" dark />

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

import {
  MetaMaskConnector,
  WalletConnectConnector,
  CoinbaseWalletConnector,
  useBoard,
} from "vue-dapp";

setup() {
  const { open } = useBoard();
  const infuraId = "";
  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}`,
    }),
  ];
  return {
    connectors,
    open,
  };
}

Take a look at Configurations for more informations about Vue CLI, Vite, and Nuxt3 configurations.

To see the demo code, check it out here.

Support 🙏

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

MIT license

Copyright (c) 2021-present, Johnson Chen (@johnson_tzw)