/vue-dapp

Empower dapp developers with Vue integration for crypto wallets

Primary LanguageTypeScriptMIT LicenseMIT

Vue Dapp Logo

Vue Dapp

Empower dapp developers with Vue integration for crypto wallets

MIT License Telegram Website

Packages 📦

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

Overview

Vue Dapp Overview

Installation

npm install pinia @vue-dapp/core @vue-dapp/modal
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

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

Examples

Development

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

Support 🙏

Credits