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

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

dapp ethereum nuxt nuxt3 typescript vite vue vue3 vuejs

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/johnson86tw/vue-dapp
• Owner: johnson86tw
• License: mit
• Fork: true (vu3th/vue-dapp)
• Created: 2023-10-03T09:02:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-23T03:32:01.000Z (8 months ago)
• Last Synced: 2024-05-23T04:51:29.455Z (8 months ago)
• Language: TypeScript
• Homepage: https://vue-dapp.vercel.app/
• Size: 3.74 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