Vue 3 library for building Dapps on Ethereum.

Last update: Jun 24, 2022

VueDapp Brand


Vue Dapp

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

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 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

License

MIT

Copyright (c) 2021-present, Johnson Chen


GitHub

https://github.com/chnejohnson/vue-dapp
Comments
  • 1. Call hook

    Initial commit for support of useCall and useCalls hooks.

    The two hooks use contract method calls under the hood if Multicall2 is not supported for the network. If Multicall2 is supported by the network as defined by multicall2-contract-addresses then the calls will automatically be batch and fed to the Multicall2 contract.

    This makes it easier to call contract methods without having to worry if multi call contracts will be used or not.

    If this is something that is wanted in the library I will finish up the documentation.

    Reviewed by kjpou1 at 2022-03-06 06:15
  • 2. Possible to extend the supported networks ? chainId.ts

    Thanks for the amazing work done! Works like a charm.

    I'm new to it, and I'm looking for a way to extent the default list of chains. That is because you already store the chains and all that information inside the plugin store.

    Is there any way to extend the current list ? without I'm having to keep track of the current chain outside of the plugin?

    I'm taking about this file: https://github.com/chnejohnson/vue-dapp/blob/main/src/constants/chainId.ts

    Also using the provided method displayChainName would resolve correctly:

    import { displayChainName } from 'vue-dapp';
    

    Thanks!

    Reviewed by re2005 at 2022-06-05 12:39
  • 3. using vue-dapp with nuxt3 error

    ``/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js:40` import { arrayify } from "@ethersproject/bytes"; ^^^^^^

    SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at ModuleWrap. (node:internal/modules/esm/translators:190:29) at ModuleJob.run (node:internal/modules/esm/module_job:185:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) [vite dev] Error loading external "/Users/jevan/nuxt3-app/node_modules/@ethersproject/basex/lib.esm/index.js". at file://./.nuxt/dist/server/server.mjs:12284:286
    at async instantiateModule (file://./.nuxt/dist/server/server.mjs:21383:3) m.default is not a function at file://./.nuxt/dist/server/server.mjs:10:126
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderToString (file://./node_modules/vue-bundle-renderer/dist/index.mjs:247:19)
    at async renderMiddleware (file://./.nuxt/nitro/index.mjs:191:20)
    at async handle (file://./node_modules/h3/dist/index.mjs:601:19) `

    Reviewed by Johnnyevans32 at 2022-01-13 00:43
  • 4. Gitcoin grants

    Hi @chnejohnson! I love this project ❤️ Us Vue devs also need a web3 library/starter kit like this (everything else is made for React).

    That said, I'm wondering if you intend to apply for a Gitcoin grant in the upcoming round 12?

    If you do, please let me know, I'll be happy to donate to it (and you'll also get matched by Gitcoin sponsors).

    P.S.: The hackathon for the Gitcoin Grants Round 12 starts on 1 Dec, not sure if you need to apply in order to post a grant, but here's the link anyway: https://gitcoin.co/hackathon/gr12/

    Reviewed by ramuta at 2021-11-19 11:38
  • 5. Walletconnect is not suitable for integration by vite ES modules environment

    Problem

    Vite is ES module only. There are many codes in Walletconnect that rely on node builtins or others.

    Reproduce

    checkout branch issue#3

    Run yarn dev for demo

    截圖 2021-08-23 下午1 01 49

    index.ts:19

    I don't know where this file comes from. @walletconnect/socket-transport/src/index.ts

    Could not load content for http://localhost:3000/@fs/Users/***/Desktop/vue-dapp/node_modules/@walletconnect/socket-transport/src/index.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)
    

    Code

    The problem is import @walletconnect/web3-provider. If remove this line, it works.

    import WalletConnectProvider from '@walletconnect/web3-provider'
    
    export function useWalletconnect() {
      async function getProvider() {
        //  Create WalletConnect Provider
        const provider = new WalletConnectProvider({
          infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
        })
    
        //  Enable session (triggers QR Code modal)
        await provider.enable()
    
        return provider
      }
    
    
    Reviewed by chnejohnson at 2021-08-23 05:07
  • 6. Add deep link to MetaMask wallet on mobile device

    Add and optional appUrl parameter and functionality to deep link to MetaMask wallet on mobile devices, or open the app store if MetaMask app isn't installed on the device. This will also open the MetaMask website on desktop is the app isn't installed.

    If the appUrl is not provide the button will be disabled the same as it is currently

    fixed #26

    Reviewed by coxlr at 2021-12-15 19:31
  • 7. Metamask on mobile devices

    I've noticed on my dapps using this package that on mobile devices the MetaMask option is greyed out as it is not available. This is the currently the expected behavior. However they can still use MetaMask via the WalletConnect option, but currently this is unclear to the end user.

    What are your thoughts on the best way to handle this? I am thinking in the greyed out MetaMask option, update the text on mobile devices to say something like "Use WalletConnect on Mobile Device" something like the below

    Screen Shot 2021-11-30 at 2 57 29 PM

    I'm happy to make a pull request for this, but wanted to see your thoughts on it first.

    Reviewed by coxlr at 2021-11-30 22:58
  • 8. Fail to compile with Vue CLI webpack environment

     ERROR  Failed to compile with 1 error                                                                                               上午9:46:03
    
     error  in ./node_modules/vue-dapp/dist/index.esm.js
    
    Module parse failed: Unexpected token (630:66)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | }
    | 
    > const WalletConnectProviderDerived = window.WalletConnectProvider?.default || null;
    | class Walletconnect {
    |     static async check() {
    
     @ ./src/main.ts 7:0-35 9:8-15
     @ multi (webpack)-dev-server/client?http://192.168.0.100:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
    
    No issues found.
    
    Reviewed by chnejohnson at 2021-10-01 01:48
  • 9. Doesn't work quick start

    Hello everybody! I am really want to use this cool plugin, but I have problems with starting. I have created a new Vue 3 default project, and did everything what was in "getting started". But my webpack doesnt want to compile, it shows me 13 errors and each about this: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. image

     Was anyone interacted with that? I was googling about it, and the solution was to add target: 'node' in webpack.config.js. Now I can compile, but there are some errors in browser console instead.
    

    image This problem about migrating webpack 4 to 5? If you have some information or expirience tell me please. Thanks.

    Reviewed by Alex-Lorem at 2022-05-26 15:10
  • 10. Custom RPC URL for WalletConnect

    Hi!

    Currently WalletConnect only works with Infura ID. The problem with Infura is that it does not support many chains, like for example Gnosis Chain (former xDai Chain).

    So I was wondering if I can somehow use WalletConnect without Infura ID (with a custom RPC URL)?

    In src/wallets/walletconnect.ts there's the connect function which takes infuraID as an input:

    static async connect(
        infuraId: string,
        options?: IWalletConnectProviderOptions,
      ) {
        const provider = new WalletConnectProviderDerived!({
          infuraId,
          ...options,
        })
    

    The ...options part can include many things, among them also rpcUrl. So how can I inject the RPC URL in this case?

    Maybe in main.ts like this:

    app.use(VueDapp, {
      infuraId: '',
      {
        rpcUrl: 'https://rpc.gnosischain.com'
      }
    })
    

    Also I'd need the RPC URL to change when the network is changed (for example from Gnosis to Polygon)...

    Any advice on how to make this work? 🙂

    Reviewed by tempe-techie at 2022-03-04 10:12
  • 11. error:Uncaught ReferenceError: global is not defined at vue-dapp.js,just running a simple Hello World example

    I'm getting this weird error when I try to run an app with vue-dapp installed: Uncaught ReferenceError: global is not defined at vue-dapp.js:71622 image

    It's just a basic hello world project at this point.

    main.js:

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

    App.vue:

    <template>
      <vdapp-board />
      <img alt="Vue logo" src="./assets/logo.png">
      <p>Hello</p>
    </template>
    
    <script>
    export default {
      name: 'App',
    }
    </script>
    
    <style>
    
    </style>
    

    And that's it.

    I don't even need WalletConnect, I just want to run a simple app to try vue-dapp out.

    Any idea how to solve this?

    Reviewed by meta-bowen at 2021-12-07 09:10
  • 12. disconnect() doesn't fire in sample code

    disconnect from useWallet doesn't fire in my app. I reproduced this in the sample code just now.

    To repro:

    1. Download latest
    2. yarn && yarn dev
    3. connect to metamask
    4. press blue disconnect button observe no console.log that says 'disconnect'

    However, changing network does fire the change event.

    Metamask is still connected after pressing disconnect. (which I figured it would be since the callback didn't fire)

    https://user-images.githubusercontent.com/877000/176020803-1bb9f9e2-3875-4157-9b56-1ded2ed76c60.mov

    Reviewed by str11ngfello at 2022-06-27 19:27
  • 13. Using balance from the useEthers hook, doesn't update after Metamask transaction

    Setup a component using useEthers

    import { useEthers } from 'vue-dapp';
    const { balance, chainId, signer, address } = useEthers();
    

    Use {{ balance }} in the template

    After a transaction I expected that the balance would be updated but it doesn't happen.

    Not sure if this is a bug or not expected behaviour.

    Thanks

    Reviewed by re2005 at 2022-06-27 17:34
  • 14. Is it possible to use my own "board" UI, or even none at all?

    I like the board UI a lot and have been using it from the beginning. (useBoard) Now that our UI has grown in complexity we need to have full control over the UI.

    For example, I'm in a dialog or two already and the useBoard call presents behind my dialogs.

    Question: is there a way to call the same function that selecting "metamask" or "coinbase" would call on the board, thereby letting us programmatically specify the connector to use? (including just auto choosing a wallet for the user without giving them a choice)

    Thanks for a great library!

    Reviewed by str11ngfello at 2022-06-26 16:25
  • 15. feat: make chain list extendable

    The available network list is essential on every application, but they are so many, so better reduce it to a few and let the user extend it as it needs.

    Please share ideas here.

    Reviewed by re2005 at 2022-06-18 14:26
  • 16. Changing network on Metamask after you disconnect wallet generate errors

    If you connect your wallet and change networks inside Metamask works well.

    But if you disconnect your wallet and after that switch networks on Metamask it will break.

    https://github.com/chnejohnson/vue-dapp/blob/main/src/composables/useWallet.ts#L42 Screenshot 2022-06-16 at 19 18 08 Screenshot 2022-06-16 at 19 18 22

    Reviewed by re2005 at 2022-06-16 17:24
A simple app generate ethereum wallet with vuejs.
A simple app generate ethereum wallet with vuejs.

vuethwallet A simple app using eth-lightwallet and vuejs to generate ethereum wallet. Usage Run development environment clone the repo npm install npm

May 11, 2022
A simple app explore ethereum blockchain with vuejs.

vuethexplore Vue project for ethereum blockchain explore. Usage clone the repo npm install npm run dev Test unit npm run unit e2e npm run e2e all n

Apr 14, 2022
Ethereum community curation protocol using NFTs based on transaction history
Ethereum community curation protocol using NFTs based on transaction history

EtherScore Ethereum community curation protocol using NFTs based on transaction history EtherScore is a protocol based on Ethereum enabling Dapps to b

Jun 7, 2022
VueJS version of Nader Dabit's full-stack-ethereum Greeting Smart Contract

VueJS Ethereum Greeting Smart Contract A VueJS version of the Greeting smart contract by Nadir Dabit. Tutorial When following the tutorial, rather tha

Nov 8, 2021
A single Web3 / Ethereum provider solution for all Wallets

Web3ModalVue A single Web3 / Ethereum provider solution for all Wallets Introduction Web3Modal is an easy-to-use library to help developers add suppor

Jun 28, 2022
A simple app generate ethereum wallet with vuejs.
A simple app generate ethereum wallet with vuejs.

vuethwallet A simple app using eth-lightwallet and vuejs to generate ethereum wallet. Usage Run development environment clone the repo npm install npm

May 11, 2022
Auction dapp - Decentralized Auction Application on Ethereum
Auction dapp - Decentralized Auction Application on Ethereum

Decentralized Auction Application on Ethereum This project aims to implement bas

Jul 3, 2022
Website com atualizações em tempo real dos valores de 5 criptomoedas (Bitcoin, Ethereum, Cosmos Hub, Luna e Dacxi), consumindo uma API.
Website com atualizações em tempo real dos valores de 5 criptomoedas (Bitcoin, Ethereum, Cosmos Hub, Luna e Dacxi), consumindo uma API.

Website com atualizações em tempo real dos valores de 5 criptomoedas (Bitcoin, Ethereum, Cosmos Hub, Luna e Dacxi), consumindo uma API.

Jun 14, 2022
A starter template for building complete application using Node.js and Vue.js with some included packages and configurations to help start the development quickly.

Node-Vue-Template A starter template for building a complete application using Node.js and Vue.js with some included packages and configurations to he

Jun 17, 2022
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

Jul 4, 2022
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.

A scalable, full-stack live quiz framework built with VueJS and NodeJS This repository contains a scalable framework for building a real-time quiz app

Jun 24, 2022
Cloud-native platform for building an NFT Marketplace on top of Algorand blockchain.
Cloud-native platform for building an NFT Marketplace on top of Algorand blockchain.

Built on OpenAlgoNFT OpenAlgoNFT is an open-source cloud-native platform for building an NFT Marketplace on top of Algorand blockchain. Learn more on

Jun 26, 2022
Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database.

sdg-007 Frontend Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database. About There is a popular sa

May 20, 2021
A carbon calculation tool for building information models.

a-carbon-tool A Carbon Tool (ACT) is an open source web application that enables users to estimate embodied carbon equivalent content from Building In

Jun 27, 2022
A website building repo for sufe CS conf countdown deadlines.
A website building repo for sufe CS conf countdown deadlines.

A DDL ⏳ Countdown tools ?? for a SUFE SIMEr to track down CS conference in tenure track lists, which can retrieve conference through CCF and TierLevel rank ?? . We provide a double search filtering system to derive THE conference you really cares about ⏰ .

Apr 19, 2022
This project is aiming for practicing of the front-end techniques for building B2C E-commerce platform
This project is aiming for practicing of the front-end techniques for building B2C E-commerce platform

This project is aiming for practicing of the front-end techniques for building B2C E-commerce platform

May 30, 2022
A Vue 3.0 library for FastComments, a fast and developer friendly comment system.

fastcomments-vue-next A Vue 3.0 library for FastComments, a fast and developer friendly comment system. Installation NPM npm install --save fastcommen

Jun 12, 2022
Unge UI - A Vue 3 Component Library
Unge UI - A Vue 3 Component Library

Unge UI - A Vue 3 Component Library

Jun 28, 2022
Engage Vue Client Components Library

Engage Vue Components Library This library provide prebuilt components in Vue.js for building Engage products Installation npm install engage-vue-comp

Feb 24, 2020