Empower dapp developers with Vue integration for crypto wallets
npm install pinia @vue-dapp/core @vue-dapp/modal
import { createPinia } from 'pinia'
app.use(createPinia())
npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
<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>
pnpm install
pnpm build
pnpm -F core watch
pnpm -F modal watch
pnpm dev
pnpm build
pnpm build:app