Quick Start

Installation

Install vagmi and its ethers peer dependency.

npm install vagmi ethers

yarn add vagmi ethers

pnpm add vagmi ethers

Quick Start

1. Configure chains

First, configure your desired chains to be used by vagmi, and the providers you want to use.

import { chain, configureChains } from 'vagmi';import { publicProvider } from 'vagmi/providers/public';const { chains, provider, webSocketProvider } = configureChains(  [chain.mainnet, chain.polygon],  [publicProvider()],);

Note: In a production app, it is not recommended to only pass publicProvider to configureChains as you will probably face rate-limiting on the public provider endpoints. It is recommended to also pass an alchemyProvider or infuraProvider as well.

2. Create a vagmi client

Next, create a vagmi Client instance using createClient, and pass the result from configureChains to it.

import {  configureChains,  createClient,  defaultChains,} from 'vagmi';import { publicProvider } from 'vagmi/providers/public';const { chains, provider, webSocketProvider } = configureChains(  [chain.mainnet, chain.polygon],  [publicProvider()],);const client = createClient({  autoConnect: true,  provider,  webSocketProvider,});

3. Install the VagmiPlugin

Finally, import and install the VagmiPlugin Vue 3 plugin, passing the client to it.

const client = createClient({  autoConnect: true,  provider,  webSocketProvider,});const app = createApp(App);app.use(VagmiPlugin(client));

Now you'll be able to use the vagmi composables anywhere in your app.

<script setup>import { computed } from 'vue'import { useAccount, useConnect, useEnsName } from 'vagmi'import { InjectedConnector } from 'vagmi/connectors/injected'const { data: account } = useAccount()const { data: ensName } = useEnsName({  address: computed(() => account.value?.address),})const { connect } = useConnect({  connector: new InjectedConnector(),})</script><template>  <div v-if="account">    Connected to {{ ensName ?? account.address }}  </div>  <button v-else @click="connect">    Connect Wallet  </button></template>

If you need to update options on your query dynamically, make sure to pass them as reactive variables.

<script setup>import { ref } from 'vue'import { useEnsName } from 'vagmi'const address = ref('0x57a44b7942bc7B512BE4A1E7dA3d4F0705212453')const enabled = ref(false)const { data } = useEnsName({ address, enabled })</script>