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 viemConnect a wallet in under 60 seconds.
import { UseWagmiPlugin, createConfig, mainnet } from 'use-wagmi'
import { createPublicClient, http } from 'viem'
import App from './App.vue'
const config = createConfig({
autoConnect: true,
publicClient: createPublicClient({
chain: mainnet,
transport: http(),
}),
})
const app = createApp(App)
app.use(UseWagmiPlugin, config)
app.mount('#app')<script setup>
import { useAccount, useConnect, useDisconnect } from 'use-wagmi'
import { InjectedConnector } from 'use-wagmi/connectors/injected'
const { address, isConnected } = useAccount()
const { connect } = useConnect({
connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
</script>
<template>
<div v-if="isConnected">
Connected to {{ address }}
<button @click="disconnect">Disconnect</button>
</div>
<button v-else @click="connect">Connect Wallet</button>
</template>In this example, we create a use-wagmi and pass it to the Vue plugin. The client is set up to use the ethers Default Provider and automatically connect to previously connected wallets.
Next, we use the useConnect composable to connect an injected wallet (e.g. MetaMask) to the app. Finally, we show the connected account's address with useAccount and allow them to disconnect with useDisconnect.
We've only scratched the surface for what you can do with use-wagmi!
To simplify the process of integrating wagmi (Web3 hooks library) with Nuxt 3 or Nuxt Bridge, we provide the @use-wagmi/nuxt module. This module enables automatic importing of wagmi functionality into your Nuxt application.
First, install the @use-wagmi/nuxt module in your project:
npm install @use-wagmi/nuxt -DNext, add the module to your Nuxt configuration:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@use-wagmi/nuxt'],
})This registers @use-wagmi/nuxt as a module in your Nuxt application.
In your main Vue file (typically app.vue), set up use-wagmi with your desired configuration:
<!-- app.vue -->
<script setup lang="ts">
import { UseWagmiPlugin, createConfig, mainnet } from 'use-wagmi';
import { createPublicClient, http } from 'viem';
const nuxtApp = useNuxtApp();
const config = createConfig({
autoConnect: true,
publicClient: createPublicClient({
chain: mainnet,
transport: http(),
}),
});
nuxtApp.vueApp.use(UseWagmiPlugin, config);
</script>
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>This script sets up the wagmi configuration and registers it with your Nuxt application.
After setting up, you can use wagmi functions anywhere in your Nuxt application. For instance, to access the connected account's address:
<script setup lang="ts">
import { useAccount } from 'use-wagmi';
const { address } = useAccount();
</script>
<template>
<div>{{ address }}</div>
</template>In this example, useAccount from wagmi is used to get the address of the connected account, which is then rendered in the template.
If you find use-wagmi useful, please consider supporting development. Thank you 🙏
ERC20-USDT: 0xb493c9555f5c2be907a3bfa363daf1fc22635fe5
TRC20-USDT: TLXcmNCTSngBXMxzmkZVHFdWE3XHEK5bBi
Please do not send other assets except USDT
MIT