https://github.com/vu3th/vue-dapp

Empower dapp developers with Vue integration for crypto wallets
https://github.com/vu3th/vue-dapp

dapp ethereum nuxt nuxt3 typescript vite vue vue3 vuejs

Last synced: 17 days ago
JSON representation

Empower dapp developers with Vue integration for crypto wallets

• Host: GitHub
• URL: https://github.com/vu3th/vue-dapp
• Owner: vu3th
• License: mit
• Created: 2021-08-20T14:27:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-23T03:15:09.000Z (7 months ago)
• Last Synced: 2024-05-23T04:36:21.962Z (7 months ago)
• Topics: dapp, ethereum, nuxt, nuxt3, typescript, vite, vue, vue3, vuejs
• Language: TypeScript
• Homepage: https://vue-dapp.vercel.app/
• Size: 3.77 MB
• Stars: 191
• Watchers: 9
• Forks: 48
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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

- [Donation history](https://vuedapp.xyz/donations)

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