use-wagmi

Vue Composition for Ethereum

Support for Vue 2.x via vue-demi

Based on wagmi

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 as most of the concepts and APIs are the same.

Installation

Install use-wagmi and its viem peer dependency.

npm install use-wagmi viem @tanstack/vue-query

Create Config

Create 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.

Setup Use Wagmi

Before using Vue Query, you need to initialize it using UseWagmiPlugin

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.

import { VueQueryPlugin } from "@tanstack/vue-query"

app.use(VueQueryPlugin)

Use of Composition API with <script setup>

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>

Nuxt

we provide the @use-wagmi/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
• VueUse
• Vue Query

License

MIT