Using the wallet button composable (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR, and all the social logins.

Follow these steps to use the composable:

  1. Install the package:
npm install @reown/appkit-wallet-button
  1. Import and use in your Vue component:
<template>
  <div>
    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">
      Connect to MetaMask
    </button>
    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">
      Open QR modal
    </button>
    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">
      Connect to Google
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>

Make sure to call wallet button methods after createAppKit has been initialized.

​
Options for wallet property

TypeOptions
QR CodewalletConnect
Walletsmetamask, trust, coinbase, rainbow, jupiter, solflare, coin98, magic-eden, backpack, frontier, xverse, okx, bitget, leather, binance, uniswap, safepal, bybit, phantom, ledger, timeless-x, safe, zerion, oneinch, crypto-com, imtoken, kraken, ronin, robinhood, exodus, argent, tokenpocket, and more
Social loginsgoogle, github, apple, facebook, x, discord, and farcaster

Using the wallet button composable (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR, and all the social logins.

Follow these steps to use the composable:

  1. Install the package:
npm install @reown/appkit-wallet-button
  1. Import and use in your Vue component:
<template>
  <div>
    <button @click="() => appKitWalletButton.connect('metamask')" :disabled="!isReady">
      Connect to MetaMask
    </button>
    <button @click="() => appKitWalletButton.connect('walletConnect')" :disabled="!isReady">
      Open QR modal
    </button>
    <button @click="() => appKitWalletButton.connect('google')" :disabled="!isReady">
      Connect to Google
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

const appKitWalletButton = createAppKitWalletButton()
const isReady = ref(false)

onMounted(() => {
  isReady.value = appKitWalletButton.isReady()
})
</script>

Make sure to call wallet button methods after createAppKit has been initialized.

​
Options for wallet property

TypeOptions
QR CodewalletConnect
Walletsmetamask, trust, coinbase, rainbow, jupiter, solflare, coin98, magic-eden, backpack, frontier, xverse, okx, bitget, leather, binance, uniswap, safepal, bybit, phantom, ledger, timeless-x, safe, zerion, oneinch, crypto-com, imtoken, kraken, ronin, robinhood, exodus, argent, tokenpocket, and more
Social loginsgoogle, github, apple, facebook, x, discord, and farcaster