Skip to content

johnson86tw/vue-dapp

 
 

Repository files navigation

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

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 50.6%
  • Vue 46.2%
  • JavaScript 1.6%
  • SCSS 1.2%
  • Other 0.4%