Vue Dapp

Empower dapp developers with Vue integration for crypto wallets

Packages 📦

Name	Description	Version	Size
@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

Getting Started

SPA with Vite

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

import { createPinia } from 'pinia'
app.use(createPinia())

<script lang="ts" setup>
import { BrowserWalletConnector, useVueDapp } from '@vue-dapp/core'
import { VueDappModal, useVueDappModal } from '@vue-dapp/modal'
import '@vue-dapp/modal/dist/style.css'

const { addConnectors, isConnected, wallet, disconnect } = useVueDapp()

addConnectors([new BrowserWalletConnector()])

function onClickConnectButton() {
	if (isConnected.value) disconnect()
	else useVueDappModal().open()
}
</script>

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

SSR with Nuxt 3

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

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

Examples

• vue-dapp-starter
• nuxt-dapp

Development

pnpm i
pnpm build
pnpm -F core watch
pnpm -F modal watch
pnpm dev

Support 🙏

0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187

Credits

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