{"id":13794372,"url":"https://github.com/unicape/use-wagmi","last_synced_at":"2025-05-12T21:30:55.904Z","repository":{"id":70029089,"uuid":"604010724","full_name":"unicape/use-wagmi","owner":"unicape","description":"Vue Composition for Ethereum based on wagmi","archived":true,"fork":false,"pushed_at":"2024-05-10T14:10:19.000Z","size":2520,"stargazers_count":170,"open_issues_count":1,"forks_count":30,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-18T08:56:52.311Z","etag":null,"topics":["dapp","ethereum","ethers","hooks","viem","vue","wagmi","wallet","web3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unicape.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-20T06:22:35.000Z","updated_at":"2024-10-05T20:27:35.000Z","dependencies_parsed_at":"2023-12-28T05:22:53.422Z","dependency_job_id":"aaf04d6d-c28f-4a9e-9b96-5dece6208502","html_url":"https://github.com/unicape/use-wagmi","commit_stats":null,"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicape%2Fuse-wagmi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicape%2Fuse-wagmi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicape%2Fuse-wagmi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicape%2Fuse-wagmi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unicape","download_url":"https://codeload.github.com/unicape/use-wagmi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253824988,"owners_count":21970113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapp","ethereum","ethers","hooks","viem","vue","wagmi","wallet","web3"],"created_at":"2024-08-03T23:00:39.813Z","updated_at":"2025-05-12T21:30:55.252Z","avatar_url":"https://github.com/unicape.png","language":"TypeScript","funding_links":[],"categories":["Projects","TypeScript"],"sub_categories":["Packages"],"readme":"[![npm (tag)](https://img.shields.io/npm/v/use-wagmi?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/use-wagmi) ![NPM](https://img.shields.io/npm/l/use-wagmi?style=flat\u0026colorA=000000\u0026colorB=000000)\n\n# use-wagmi\n\nVue Composition for Ethereum\n\nSupport for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)\n\nBased on [wagmi](https://wagmi.sh)\n\n## Features\n\n- 🚀 Composables for working with wallets, ENS, contracts, transactions, signing, etc.\n- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected\n- 👟 Caching, request deduplication, multicall, batching, and persistence\n- 🌀 Auto-refresh data on wallet, block, and network changes\n- 🦄 TypeScript ready\n\n...and a lot more.\n\n## Documentation\n\n`use-wagmi docs` visit [wagmi docs](https://wagmi.sh) as most of the concepts and APIs are the same.\n\n## Installation\n\nInstall use-wagmi and its [viem](https://viem.sh) peer dependency.\n\n```bash\nnpm install use-wagmi viem @tanstack/vue-query\n```\n\n## Create Config\n\nCreate and export a new Wagmi config using **createConfig**.\n\n```ts\nimport { http, createConfig } from 'use-wagmi'\nimport { mainnet, sepolia } from 'use-wagmi/chains'\n\nexport const config = createConfig({\n  chains: [mainnet, sepolia],\n  transports: {\n    [mainnet.id]: http(),\n    [sepolia.id]: http(),\n  },\n})\n```\n\nIn this example, Wagmi is configured to use the Mainnet and Sepolia chains, and **injected** connector. Check out the **createConfig** [docs](https://wagmi.sh/react/api/createConfig) for more configuration options.\n\n## Setup Use Wagmi\n\nBefore using Vue Query, you need to initialize it using `UseWagmiPlugin`\n\n```ts\nimport { UseWagmiPlugin } from 'use-wagmi'\n\napp.use(UseWagmiPlugin, { config })\n```\n\n## Setup TanStack Query\n\nInside the `VueQueryPlugin`, wrap your app in a TanStack Query Vue Plugin, e.g. VueQueryPlugin, and pass a new QueryClient instance to the client property.\n\n```ts\nimport { VueQueryPlugin } from \"@tanstack/vue-query\"\n\napp.use(VueQueryPlugin)\n```\n\n## Use of Composition API with `\u003cscript setup\u003e`\n\nAll examples in our documentation use `\u003cscript setup\u003e` syntax.\n\nVue 2 users can also use that syntax using this plugin. Please check the plugin documentation for installation details.\n\nIf you are not a fan of `\u003cscript setup\u003e` syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under `setup()` function and returning the values used in the template.\n\n```vue\n\u003cscript setup\u003e\nimport { useAccount, useDisconnect } from 'use-wagmi'\n\nconst { address, chainId, status } = useAccount()\nconst { disconnect } = useDisconnect()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch2\u003eAccount\u003c/h2\u003e\n    \u003cdiv\u003e\n      account: {{ address }}\n      chainId: {{ chainId }}\n      status: {{ status }}\n    \u003c/div\u003e\n\n    \u003cbutton v-if=\"status !== 'disconnected'\" type=\"button\" @click=\"() =\u003e disconnect()\"\u003eDisconnect\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Nuxt\n\nwe provide the [@use-wagmi/nuxt](https://github.com/unicape/use-wagmi/tree/main/packages/nuxt) module. This module enables automatic importing of wagmi functionality into your Nuxt application.\n\n## Support\n\nIf you find `use-wagmi` useful, please consider supporting development. Thank you 🙏\n\nERC20: 0xb493c9555f5c2be907a3bfa363daf1fc22635fe5\u003cbr /\u003eTRC20: TLXcmNCTSngBXMxzmkZVHFdWE3XHEK5bBi\n\n## Credits\n\n- [wagmi.sh](https://wagmi.sh/)\n- [VueUse](https://vueuse.org/)\n- [Vue Query](https://vue-query.vercel.app/)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicape%2Fuse-wagmi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funicape%2Fuse-wagmi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicape%2Fuse-wagmi/lists"}