Vue Composables for Ethereum

• 🚀 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
• 🌳 [WIP] Test suite running against forked Ethereum network

...and a lot more.

For full documentation and examples, visit vagmi.vercel.app.

Install vagmi and its ethers peer dependency.

npm install vagmi ethers

Connect a wallet in under 60 seconds.

import { VagmiPlugin, createClient } from 'vagmi';
import { getDefaultProvider } from 'ethers';
import App from './App.vue';

const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider(),
});

const app = createApp(App);
app.use(VagmiPlugin(client));
app.mount('#app');

<script setup>
import { useAccount, useConnect, useDisconnect } from 'vagmi'
import { InjectedConnector } from 'vagmi/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 vagmi Client and pass it to the VagmiPlugin 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 vagmi!

• wagmi.sh
• VueUse
• Vue Query

MIT