{"_path":"/getting-started/quick-start","_draft":false,"_partial":false,"_empty":false,"title":"Quick Start","description":"Getting started with vagmi.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vagmi"}]},{"type":"text","value":" and its "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ethers"}]},{"type":"text","value":" peer dependency."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"npm install vagmi ethers\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install vagmi ethers\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add vagmi ethers\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add vagmi ethers\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"pnpm add vagmi ethers\n","filename":"pnpm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"pnpm add vagmi ethers\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"quick-start"},"children":[{"type":"text","value":"Quick Start"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Configure chains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, configure your desired chains to be used by vagmi, and the providers you want to use."}]},{"type":"element","tag":"code","props":{"code":"import { chain, configureChains } from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { chain, configureChains } from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: In a production app, it is not recommended to only pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"publicProvider"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"configureChains"}]},{"type":"text","value":" as you will probably face rate-limiting on the public provider endpoints. It is recommended to also pass an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alchemyProvider"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"infuraProvider"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a vagmi client"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, create a vagmi "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Client"}]},{"type":"text","value":" instance using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"createClient"}]},{"type":"text","value":", and pass the result from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"configureChains"}]},{"type":"text","value":" to it."}]},{"type":"element","tag":"code","props":{"code":"import {\n  configureChains,\n  createClient,\n  defaultChains,\n} from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n\nconst client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import {\n  configureChains,\n  createClient,\n  defaultChains,\n} from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n\nconst client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"VagmiPlugin"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, import and install the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"VagmiPlugin"}]},{"type":"text","value":" Vue 3 plugin, passing the client to it."}]},{"type":"element","tag":"code","props":{"code":"const client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n\nconst app = createApp(App);\napp.use(VagmiPlugin(client));\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n\nconst app = createApp(App);\napp.use(VagmiPlugin(client));\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you'll be able to use the vagmi composables anywhere in your app."}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { computed } from 'vue'\nimport { useAccount, useConnect, useEnsName } from 'vagmi'\nimport { InjectedConnector } from 'vagmi/connectors/injected'\n\nconst { data: account } = useAccount()\nconst { data: ensName } = useEnsName({\n  address: computed(() => account.value?.address),\n})\nconst { connect } = useConnect({\n  connector: new InjectedConnector(),\n})\n</script>\n\n<template>\n  <div v-if=\"account\">\n    Connected to {{ ensName ?? account.address }}\n  </div>\n  <button v-else @click=\"connect\">\n    Connect Wallet\n  </button>\n</template>\n","filename":"App.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport { computed } from 'vue'\nimport { useAccount, useConnect, useEnsName } from 'vagmi'\nimport { InjectedConnector } from 'vagmi/connectors/injected'\n\nconst { data: account } = useAccount()\nconst { data: ensName } = useEnsName({\n  address: computed(() => account.value?.address),\n})\nconst { connect } = useConnect({\n  connector: new InjectedConnector(),\n})\n</script>\n\n<template>\n  <div v-if=\"account\">\n    Connected to {{ ensName ?? account.address }}\n  </div>\n  <button v-else @click=\"connect\">\n    Connect Wallet\n  </button>\n</template>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to update options on your query dynamically, make sure to pass them as reactive variables."}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { ref } from 'vue'\nimport { useEnsName } from 'vagmi'\n\nconst address = ref('0x57a44b7942bc7B512BE4A1E7dA3d4F0705212453')\nconst enabled = ref(false)\n\nconst { data } = useEnsName({ address, enabled })\n</script>\n","filename":"App.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport { ref } from 'vue'\nimport { useEnsName } from 'vagmi'\n\nconst address = ref('0x57a44b7942bc7B512BE4A1E7dA3d4F0705212453')\nconst enabled = ref(false)\n\nconst { data } = useEnsName({ address, enabled })\n</script>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vagmi"}]},{"type":"text","value":" and its "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ethers"}]},{"type":"text","value":" peer dependency."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"npm install vagmi ethers\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"npm install vagmi ethers"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add vagmi ethers\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"yarn add vagmi ethers"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"pnpm add vagmi ethers\n","filename":"pnpm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"pnpm add vagmi ethers"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"quick-start"},"children":[{"type":"text","value":"Quick Start"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Configure chains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, configure your desired chains to be used by vagmi, and the providers you want to use."}]},{"type":"element","tag":"code","props":{"code":"import { chain, configureChains } from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"chain"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"configureChains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi'"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"publicProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi/providers/public'"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"webSocketProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"configureChains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  ["}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chain"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"mainnet"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chain"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"polygon"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  ["}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"publicProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"()],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: In a production app, it is not recommended to only pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"publicProvider"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"configureChains"}]},{"type":"text","value":" as you will probably face rate-limiting on the public provider endpoints. It is recommended to also pass an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alchemyProvider"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"infuraProvider"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a vagmi client"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, create a vagmi "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Client"}]},{"type":"text","value":" instance using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"createClient"}]},{"type":"text","value":", and pass the result from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"configureChains"}]},{"type":"text","value":" to it."}]},{"type":"element","tag":"code","props":{"code":"import {\n  configureChains,\n  createClient,\n  defaultChains,\n} from 'vagmi';\nimport { publicProvider } from 'vagmi/providers/public';\n\nconst { chains, provider, webSocketProvider } = configureChains(\n  [chain.mainnet, chain.polygon],\n  [publicProvider()],\n);\n\nconst client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"configureChains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"createClient"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"defaultChains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi'"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"publicProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi/providers/public'"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"webSocketProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"configureChains"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  ["}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chain"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"mainnet"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"chain"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"polygon"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  ["}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"publicProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"()],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"createClient"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"autoConnect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"webSocketProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"VagmiPlugin"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, import and install the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"VagmiPlugin"}]},{"type":"text","value":" Vue 3 plugin, passing the client to it."}]},{"type":"element","tag":"code","props":{"code":"const client = createClient({\n  autoConnect: true,\n  provider,\n  webSocketProvider,\n});\n\nconst app = createApp(App);\napp.use(VagmiPlugin(client));\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"createClient"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"autoConnect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"webSocketProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"VagmiPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"));"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you'll be able to use the vagmi composables anywhere in your app."}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { computed } from 'vue'\nimport { useAccount, useConnect, useEnsName } from 'vagmi'\nimport { InjectedConnector } from 'vagmi/connectors/injected'\n\nconst { data: account } = useAccount()\nconst { data: ensName } = useEnsName({\n  address: computed(() => account.value?.address),\n})\nconst { connect } = useConnect({\n  connector: new InjectedConnector(),\n})\n</script>\n\n<template>\n  <div v-if=\"account\">\n    Connected to {{ ensName ?? account.address }}\n  </div>\n  <button v-else @click=\"connect\">\n    Connect Wallet\n  </button>\n</template>\n","filename":"App.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vue'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"useAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"useConnect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"useEnsName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"InjectedConnector"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi/connectors/injected'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"useAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"ensName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"useEnsName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"connect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"useConnect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"connector"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"InjectedConnector"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"Connected"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" {{ "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"ensName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" ?? "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"v-else"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"connect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"Connect"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"Wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to update options on your query dynamically, make sure to pass them as reactive variables."}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { ref } from 'vue'\nimport { useEnsName } from 'vagmi'\n\nconst address = ref('0x57a44b7942bc7B512BE4A1E7dA3d4F0705212453')\nconst enabled = ref(false)\n\nconst { data } = useEnsName({ address, enabled })\n</script>\n","filename":"App.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vue'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"useEnsName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'vagmi'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-413c9c"},"children":[{"type":"text","value":"'0x57a44b7942bc7B512BE4A1E7dA3d4F0705212453'"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"enabled"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9c2532"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47fffa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-99dd0b"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e1acd2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cbeec"},"children":[{"type":"text","value":"useEnsName"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"enabled"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7e523d"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-e8eb4c"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-9c2532{color:#D19A66}.ct-3cbeec{color:#61AFEF}.ct-e1acd2{color:#56B6C2}.ct-99dd0b{color:#E5C07B}.ct-413c9c{color:#98C379}.ct-7e523d{color:#E06C75}.ct-47fffa{color:#C678DD}.ct-e8eb4c{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"installation","depth":2,"text":"Installation"},{"id":"quick-start","depth":2,"text":"Quick Start"}]}},"_type":"markdown","_id":"content:1.getting-started:2.quick-start.md","_source":"content","_file":"1.getting-started/2.quick-start.md","_extension":"md"}