Vue Dapp

Empower dapp developers with Vue integration for crypto wallets

Packages 📦

| Name | Description | Version | | ----------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | @vue-dapp/core | useVueDapp & VueDappProvider | | | @vue-dapp/nuxt | Vue Dapp Nuxt module | | | @vue-dapp/modal | VueDappModal for a wallet modal | | | @vue-dapp/walletconnect | WalletConnect integration | | | @vue-dapp/coinbase | Coinbase Wallet integration | |

Overview

Installation

npm install pinia @vue-dapp/core @vue-dapp/modal

[main.ts]
import { createPinia } from 'pinia'
app.use(createPinia())

Nuxt

npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal

modules: ['@pinia/nuxt', '@vue-dapp/nuxt']

Getting Started

<template>
	<button @click="onClickConnectButton">{{ isConnected ? 'Disconnect' : 'Connect' }}</button>
<div>status: {{ wallet.status }}</div> 	<div>isConnected: {{ isConnected }}</div> 	<div>error: {{ wallet.error }}</div>
<div v-if="isConnected"> 		<div>chainId: {{ wallet.chainId }}</div> 		<div>address: {{ wallet.address }}</div> 	</div>
<VueDappModal dark auto-connect /> </template>

Examples

• vue-dapp-starter
• nuxt-dapp

Development

pnpm install
pnpm build
pnpm -F core watch
pnpm -F modal watch
pnpm dev
pnpm build
pnpm build:app

Support 🙏

• 0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187
• Donation history

Credits

• Vue Dapp Logo by @ramuta https://github.com/vu3th/vue-dapp/issues/24
• Favicon.io - Emoji Favicons > Sheaf Of Rice https://favicon.io/emoji-favicons/sheaf-of-rice