Vue Composition for Ethereum
Support for Vue 2.x via vue-demi
Based on wagmi
- 🚀 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.
use-wagmi docs visit wagmi docs as most of the concepts and APIs are the same.
Install use-wagmi and its viem peer dependency.
npm install use-wagmi viem @tanstack/vue-queryCreate and export a new Wagmi config using createConfig.
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 for more configuration options.
Before using Vue Query, you need to initialize it using UseWagmiPlugin
import { UseWagmiPlugin } from 'use-wagmi'
app.use(UseWagmiPlugin, { config })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.
import { VueQueryPlugin } from "@tanstack/vue-query"
app.use(VueQueryPlugin)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.
<script setup>
import { useAccount, useDisconnect } from 'use-wagmi'
const { address, chainId, status } = useAccount()
const { disconnect } = useDisconnect()
</script>
<template>
<div>
<h2>Account</h2>
<div>
account: {{ address }}
chainId: {{ chainId }}
status: {{ status }}
</div>
<button v-if="status !== 'disconnected'" type="button" @click="() => disconnect()">Disconnect</button>
</div>
</template>we provide the @use-wagmi/nuxt module. This module enables automatic importing of wagmi functionality into your Nuxt application.
If you find use-wagmi useful, please consider supporting development. Thank you 🙏
ERC20: 0xb493c9555f5c2be907a3bfa363daf1fc22635fe5
TRC20: TLXcmNCTSngBXMxzmkZVHFdWE3XHEK5bBi
MIT