|
| 1 | +[](https://www.npmjs.com/package/use-wagmi)  |
| 2 | + |
| 3 | +# use-wagmi |
| 4 | + |
| 5 | +Vue Composition for Ethereum |
| 6 | + |
| 7 | +Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi) |
| 8 | + |
| 9 | +Based on [wagmi](https://wagmi.sh) |
| 10 | + |
| 11 | +## Features |
| 12 | + |
| 13 | +- 🚀 Composables for working with wallets, ENS, contracts, transactions, signing, etc. |
| 14 | +- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected |
| 15 | +- 👟 Caching, request deduplication, multicall, batching, and persistence |
| 16 | +- 🌀 Auto-refresh data on wallet, block, and network changes |
| 17 | +- 🦄 TypeScript ready |
| 18 | + |
| 19 | +...and a lot more. |
| 20 | + |
| 21 | +## Documentation |
| 22 | + |
| 23 | +`use-wagmi docs` visit [wagmi docs](https://wagmi.sh) as most of the concepts and APIs are the same. |
| 24 | + |
| 25 | +## Installation |
| 26 | + |
| 27 | +Install use-wagmi and its ethers peer dependency. |
| 28 | + |
| 29 | +```bash |
| 30 | +npm install use-wagmi viem |
| 31 | +``` |
| 32 | + |
| 33 | +## Quick Start |
| 34 | + |
| 35 | +Connect a wallet in under 60 seconds. |
| 36 | + |
| 37 | +```ts |
| 38 | +import { UseWagmiPlugin, WagmiConfig, createConfig, mainnet } from 'use-wagmi' |
| 39 | +import { createPublicClient, http } from 'viem' |
| 40 | +import App from './App.vue' |
| 41 | + |
| 42 | +const config = createConfig({ |
| 43 | + autoConnect: true, |
| 44 | + publicClient: createPublicClient({ |
| 45 | + chain: mainnet, |
| 46 | + transport: http(), |
| 47 | + }), |
| 48 | +}) |
| 49 | + |
| 50 | +const app = createApp(App); |
| 51 | +app.use(UseWagmiPlugin, config); |
| 52 | +app.mount('#app'); |
| 53 | +``` |
| 54 | + |
| 55 | +```html |
| 56 | +<script setup> |
| 57 | +import { useAccount, useConnect, useDisconnect } from 'use-wagmi' |
| 58 | +import { InjectedConnector } from 'use-wagmi/connectors' |
| 59 | +
|
| 60 | +const { address, isConnected } = useAccount() |
| 61 | +const { connect } = useConnect({ |
| 62 | + connector: new InjectedConnector(), |
| 63 | +}) |
| 64 | +const { disconnect } = useDisconnect() |
| 65 | +</script> |
| 66 | + |
| 67 | +<template> |
| 68 | + <div v-if="isConnected"> |
| 69 | + Connected to {{ address }} |
| 70 | + <button @click="disconnect">Disconnect</button> |
| 71 | + </div> |
| 72 | + <button v-else @click="connect"> |
| 73 | + Connect Wallet |
| 74 | + </button> |
| 75 | +</template> |
| 76 | +``` |
| 77 | + |
| 78 | +In this example, we create a use-wagmi `wagmi` and pass it to the Vue plugin. The client is set up to use the ethers Default Provider and automatically connect to previously connected wallets. |
| 79 | + |
| 80 | +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`. |
| 81 | + |
| 82 | +We've only scratched the surface for what you can do with use-wagmi! |
| 83 | + |
| 84 | +## Credits |
| 85 | + |
| 86 | +- [wagmi.sh](https://wagmi.sh/) |
| 87 | +- [VueUse](https://vueuse.org/) |
| 88 | +- [Vue Query](https://vue-query.vercel.app/) |
| 89 | + |
| 90 | +## License |
| 91 | + |
| 92 | +MIT |
0 commit comments