Vue Composables for Ethereum
For full documentation and examples, visit vagmi.vercel.app.
Install vagmi and its ethers peer dependency.
npm install vagmi ethersConnect a wallet in under 60 seconds.
import { VagmiPlugin, createClient } from 'vagmi';
import App from './App.vue';
const client = createClient();
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 { data } = useAccount()
const { connect } = useConnect({
connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
</script>
<template>
<div v-if="data">
Connected to {{ data.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 plugin. Next, we use the useConnect hook 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.
MIT