Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unicape/use-wagmi
Vue Composition for Ethereum based on wagmi
https://github.com/unicape/use-wagmi
dapp ethereum ethers hooks viem vue wagmi wallet web3
Last synced: 3 months ago
JSON representation
Vue Composition for Ethereum based on wagmi
- Host: GitHub
- URL: https://github.com/unicape/use-wagmi
- Owner: unicape
- License: mit
- Archived: true
- Created: 2023-02-20T06:22:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T14:10:19.000Z (9 months ago)
- Last Synced: 2024-08-03T23:03:37.159Z (6 months ago)
- Topics: dapp, ethereum, ethers, hooks, viem, vue, wagmi, wallet, web3
- Language: TypeScript
- Homepage:
- Size: 2.4 MB
- Stars: 167
- Watchers: 5
- Forks: 30
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/use-wagmi) 
# use-wagmi
Vue Composition for Ethereum
Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
Based on [wagmi](https://wagmi.sh)
## Features
- 🚀 Composables for working with wallets, ENS, contracts, transactions, signing, etc.
- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
- 👟 Caching, request deduplication, multicall, batching, and persistence
- 🌀 Auto-refresh data on wallet, block, and network changes
- 🦄 TypeScript ready
...and a lot more.
## Documentation
`use-wagmi docs` visit [wagmi docs](https://wagmi.sh) as most of the concepts and APIs are the same.
## Installation
Install use-wagmi and its [viem](https://viem.sh) peer dependency.
```bash
npm install use-wagmi viem @tanstack/vue-query
```
## Create Config
Create and export a new Wagmi config using **createConfig**.
```ts
import { http, createConfig } from 'use-wagmi'
import { mainnet, sepolia } from 'use-wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
```
In this example, Wagmi is configured to use the Mainnet and Sepolia chains, and **injected** connector. Check out the **createConfig** [docs](https://wagmi.sh/react/api/createConfig) for more configuration options.
## Setup Use Wagmi
Before using Vue Query, you need to initialize it using `UseWagmiPlugin`
```ts
import { UseWagmiPlugin } from 'use-wagmi'
app.use(UseWagmiPlugin, { config })
```
## Setup TanStack Query
Inside the `VueQueryPlugin`, wrap your app in a TanStack Query Vue Plugin, e.g. VueQueryPlugin, and pass a new QueryClient instance to the client property.
```ts
import { VueQueryPlugin } from "@tanstack/vue-query"
app.use(VueQueryPlugin)
```
## Use of Composition API with ``
All examples in our documentation use `<script setup>` syntax.
Vue 2 users can also use that syntax using this plugin. Please check the plugin documentation for installation details.
If you are not a fan of `<script setup>` syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under `setup()` function and returning the values used in the template.
```vue
<script setup>
import { useAccount, useDisconnect } from 'use-wagmi'
const { address, chainId, status } = useAccount()
const { disconnect } = useDisconnect()
Account
account: {{ address }}
chainId: {{ chainId }}
status: {{ status }}
disconnect()">Disconnect
```
## Nuxt
we provide the [@use-wagmi/nuxt](https://github.com/unicape/use-wagmi/tree/main/packages/nuxt) module. This module enables automatic importing of wagmi functionality into your Nuxt application.
## Support
If you find `use-wagmi` useful, please consider supporting development. Thank you 🙏
ERC20: 0xb493c9555f5c2be907a3bfa363daf1fc22635fe5
TRC20: TLXcmNCTSngBXMxzmkZVHFdWE3XHEK5bBi
## Credits
- [wagmi.sh](https://wagmi.sh/)
- [VueUse](https://vueuse.org/)
- [Vue Query](https://vue-query.vercel.app/)
## License
MIT