https://github.com/johnson86tw/vue-dapp
Empower dapp developers with Vue integration for crypto wallets
https://github.com/johnson86tw/vue-dapp
dapp ethereum nuxt nuxt3 typescript vite vue vue3 vuejs
Last synced: 4 months ago
JSON representation
Empower dapp developers with Vue integration for crypto wallets
- Host: GitHub
- URL: https://github.com/johnson86tw/vue-dapp
- Owner: johnson86tw
- License: mit
- Fork: true (ethaccount/vue-dapp)
- Created: 2023-10-03T09:02:45.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-10T12:48:15.000Z (6 months ago)
- Last Synced: 2025-06-21T11:03:10.125Z (4 months ago)
- Language: TypeScript
- Homepage: https://vue-dapp.vercel.app/
- Size: 3.77 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
Awesome Lists containing this project
- awesome-vue-3 - vue-dapp - Vue 3 library for building Dapps with ethers.js. (Examples)
README
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
```bash
npm install pinia @vue-dapp/core @vue-dapp/modal
```
```ts [main.ts]
import { createPinia } from 'pinia'
app.use(createPinia())
```
### Nuxt
```bash
npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
```
```ts
modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
```
## Getting Started
```vue
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()
}
{{ isConnected ? 'Disconnect' : 'Connect' }}
status: {{ wallet.status }}
isConnected: {{ isConnected }}
error: {{ wallet.error }}
chainId: {{ wallet.chainId }}
address: {{ wallet.address }}
```
## Examples
- [vue-dapp-starter](https://github.com/vu3th/vue-dapp-starter)
- [nuxt-dapp](https://github.com/vu3th/nuxt-dapp)
## Development
```bash
pnpm install
pnpm build
pnpm -F core watch
pnpm -F modal watch
pnpm dev
pnpm build
pnpm build:app
```
## Support 🙏
0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187
## 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