Actions

Actions are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

When using AppKit actions in Nuxt, make sure to use them within <client-only> components for SSR compatibility.

You can use actions to control the modal, subscribe to wallet events and interact with them and smart contracts.

useAppKit

Hook for controlling the modal.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open, close } = useAppKit()
</script>

<template>
  <client-only>
    <button @click="open">Open Modal</button>
    <button @click="close">Close Modal</button>
  </client-only>
</template>

You can also select the modal’s view when calling the open function.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open } = useAppKit()

function openConnectModal() {
  open({ view: 'Connect' })
}

function openAccountModal() {
  open({ view: 'Account' })
}
</script>

<template>
  <client-only>
    <button @click="openConnectModal">Open Connect Modal</button>
    <button @click="openAccountModal">Open Account Modal</button>
  </client-only>
</template>

useAppKitAccount

Hook for accessing account data.

<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { address, caipAddress, isConnected, status } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Address: {{ address }}</p>
      <p>CAIP Address: {{ caipAddress }}</p>
      <p>Status: {{ status }}</p>
    </div>
    <div v-else>
      <p>Not connected</p>
    </div>
  </client-only>
</template>

useAppKitNetwork

Hook for accessing network data.

<script setup lang="ts">
import { useAppKitNetwork } from '@reown/appkit/vue'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()

function handleSwitchNetwork() {
  switchNetwork(arbitrum)
}
</script>

<template>
  <client-only>
    <div>
      <p>Network: {{ caipNetwork?.name }}</p>
      <p>Chain ID: {{ chainId }}</p>
      <button @click="handleSwitchNetwork">Switch to Arbitrum</button>
    </div>
  </client-only>
</template>

useAppKitState

Hook for accessing the modal’s state.

<script setup lang="ts">
import { useAppKitState } from '@reown/appkit/vue'

const { open, selectedNetworkId } = useAppKitState()
</script>

<template>
  <client-only>
    <div>
      <p>Modal Open: {{ open }}</p>
      <p>Selected Network ID: {{ selectedNetworkId }}</p>
    </div>
  </client-only>
</template>

useAppKitTheme

Hook for controlling the modal’s theme.

<script setup lang="ts">
import { useAppKitTheme } from '@reown/appkit/vue'

const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme()

function toggleTheme() {
  setThemeMode(themeMode.value === 'dark' ? 'light' : 'dark')
}

function setCustomTheme() {
  setThemeVariables({
    '--w3m-color-mix': '#00BB7F',
    '--w3m-color-mix-strength': 40
  })
}
</script>

<template>
  <client-only>
    <div>
      <p>Current Theme: {{ themeMode }}</p>
      <button @click="toggleTheme">Toggle Theme</button>
      <button @click="setCustomTheme">Set Custom Theme</button>
    </div>
  </client-only>
</template>

useDisconnect

Hook for disconnecting the wallet.

<script setup lang="ts">
import { useDisconnect } from '@reown/appkit/vue'

const { disconnect } = useDisconnect()

async function handleDisconnect() {
  await disconnect()
}
</script>

<template>
  <client-only>
    <button @click="handleDisconnect">Disconnect</button>
  </client-only>
</template>

Wagmi Actions

You can also use Wagmi actions to interact with the blockchain:

<script setup lang="ts">
import { readContract, writeContract } from '@wagmi/core'
import { useAppKitAccount } from '@reown/appkit/vue'
import { wagmiConfig } from '~/config/appkit'

const { address } = useAppKitAccount()

async function readContractData() {
  const result = await readContract(wagmiConfig, {
    address: '0x...',
    abi: [...],
    functionName: 'balanceOf',
    args: [address.value]
  })
  console.log(result)
}

async function writeContractData() {
  const result = await writeContract(wagmiConfig, {
    address: '0x...',
    abi: [...],
    functionName: 'transfer',
    args: ['0x...', BigInt(1000)]
  })
  console.log(result)
}
</script>

<template>
  <client-only>
    <button @click="readContractData">Read Contract</button>
    <button @click="writeContractData">Write Contract</button>
  </client-only>
</template>

You can use actions to control the modal, subscribe to wallet events and interact with them and smart contracts.

useAppKit

Hook for controlling the modal.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open, close } = useAppKit()
</script>

<template>
  <client-only>
    <button @click="open">Open Modal</button>
    <button @click="close">Close Modal</button>
  </client-only>
</template>

You can also select the modal’s view when calling the open function.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open } = useAppKit()

function openConnectModal() {
  open({ view: 'Connect' })
}

function openAccountModal() {
  open({ view: 'Account' })
}
</script>

<template>
  <client-only>
    <button @click="openConnectModal">Open Connect Modal</button>
    <button @click="openAccountModal">Open Account Modal</button>
  </client-only>
</template>

useAppKitAccount

Hook for accessing account data.

<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { address, caipAddress, isConnected, status } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Address: {{ address }}</p>
      <p>CAIP Address: {{ caipAddress }}</p>
      <p>Status: {{ status }}</p>
    </div>
    <div v-else>
      <p>Not connected</p>
    </div>
  </client-only>
</template>

useAppKitNetwork

Hook for accessing network data.

<script setup lang="ts">
import { useAppKitNetwork } from '@reown/appkit/vue'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()

function handleSwitchNetwork() {
  switchNetwork(arbitrum)
}
</script>

<template>
  <client-only>
    <div>
      <p>Network: {{ caipNetwork?.name }}</p>
      <p>Chain ID: {{ chainId }}</p>
      <button @click="handleSwitchNetwork">Switch to Arbitrum</button>
    </div>
  </client-only>
</template>

useAppKitState

Hook for accessing the modal’s state.

<script setup lang="ts">
import { useAppKitState } from '@reown/appkit/vue'

const { open, selectedNetworkId } = useAppKitState()
</script>

<template>
  <client-only>
    <div>
      <p>Modal Open: {{ open }}</p>
      <p>Selected Network ID: {{ selectedNetworkId }}</p>
    </div>
  </client-only>
</template>

useAppKitTheme

Hook for controlling the modal’s theme.

<script setup lang="ts">
import { useAppKitTheme } from '@reown/appkit/vue'

const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme()

function toggleTheme() {
  setThemeMode(themeMode.value === 'dark' ? 'light' : 'dark')
}

function setCustomTheme() {
  setThemeVariables({
    '--w3m-color-mix': '#00BB7F',
    '--w3m-color-mix-strength': 40
  })
}
</script>

<template>
  <client-only>
    <div>
      <p>Current Theme: {{ themeMode }}</p>
      <button @click="toggleTheme">Toggle Theme</button>
      <button @click="setCustomTheme">Set Custom Theme</button>
    </div>
  </client-only>
</template>

useDisconnect

Hook for disconnecting the wallet.

<script setup lang="ts">
import { useDisconnect } from '@reown/appkit/vue'

const { disconnect } = useDisconnect()

async function handleDisconnect() {
  await disconnect()
}
</script>

<template>
  <client-only>
    <button @click="handleDisconnect">Disconnect</button>
  </client-only>
</template>

Wagmi Actions

You can also use Wagmi actions to interact with the blockchain:

<script setup lang="ts">
import { readContract, writeContract } from '@wagmi/core'
import { useAppKitAccount } from '@reown/appkit/vue'
import { wagmiConfig } from '~/config/appkit'

const { address } = useAppKitAccount()

async function readContractData() {
  const result = await readContract(wagmiConfig, {
    address: '0x...',
    abi: [...],
    functionName: 'balanceOf',
    args: [address.value]
  })
  console.log(result)
}

async function writeContractData() {
  const result = await writeContract(wagmiConfig, {
    address: '0x...',
    abi: [...],
    functionName: 'transfer',
    args: ['0x...', BigInt(1000)]
  })
  console.log(result)
}
</script>

<template>
  <client-only>
    <button @click="readContractData">Read Contract</button>
    <button @click="writeContractData">Write Contract</button>
  </client-only>
</template>

You can use actions to control the modal, subscribe to wallet events and interact with them and smart contracts.

useAppKit

Hook for controlling the modal.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open, close } = useAppKit()
</script>

<template>
  <client-only>
    <button @click="open">Open Modal</button>
    <button @click="close">Close Modal</button>
  </client-only>
</template>

useAppKitAccount

Hook for accessing account data.

<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { address, caipAddress, isConnected, status } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Address: {{ address }}</p>
      <p>CAIP Address: {{ caipAddress }}</p>
      <p>Status: {{ status }}</p>
    </div>
    <div v-else>
      <p>Not connected</p>
    </div>
  </client-only>
</template>

useAppKitProvider

Hook for accessing the Ethers provider.

<script setup lang="ts">
import { BrowserProvider, Contract, parseEther } from 'ethers'
import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'

const { walletProvider } = useAppKitProvider('eip155')
const { address } = useAppKitAccount()

async function sendTransaction() {
  if (!walletProvider || !address.value) return
  
  const ethersProvider = new BrowserProvider(walletProvider)
  const signer = await ethersProvider.getSigner()
  
  const tx = await signer.sendTransaction({
    to: '0x...',
    value: parseEther('0.001')
  })
  
  console.log('Transaction:', tx)
}

async function signMessage() {
  if (!walletProvider || !address.value) return
  
  const ethersProvider = new BrowserProvider(walletProvider)
  const signer = await ethersProvider.getSigner()
  
  const signature = await signer.signMessage('Hello World!')
  console.log('Signature:', signature)
}
</script>

<template>
  <client-only>
    <button @click="sendTransaction">Send Transaction</button>
    <button @click="signMessage">Sign Message</button>
  </client-only>
</template>

Contract Interaction

<script setup lang="ts">
import { BrowserProvider, Contract } from 'ethers'
import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'

const { walletProvider } = useAppKitProvider('eip155')
const { address } = useAppKitAccount()

const contractABI = [
  'function balanceOf(address owner) view returns (uint256)',
  'function transfer(address to, uint256 amount) returns (bool)'
]

async function readContract() {
  if (!walletProvider) return
  
  const ethersProvider = new BrowserProvider(walletProvider)
  const contract = new Contract('0x...', contractABI, ethersProvider)
  
  const balance = await contract.balanceOf(address.value)
  console.log('Balance:', balance.toString())
}

async function writeContract() {
  if (!walletProvider) return
  
  const ethersProvider = new BrowserProvider(walletProvider)
  const signer = await ethersProvider.getSigner()
  const contract = new Contract('0x...', contractABI, signer)
  
  const tx = await contract.transfer('0x...', parseEther('1'))
  console.log('Transaction:', tx)
}
</script>

<template>
  <client-only>
    <button @click="readContract">Read Contract</button>
    <button @click="writeContract">Write Contract</button>
  </client-only>
</template>

You can use actions to control the modal, subscribe to wallet events and interact with them and smart contracts.

useAppKit

Hook for controlling the modal.

<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue'

const { open, close } = useAppKit()
</script>

<template>
  <client-only>
    <button @click="open">Open Modal</button>
    <button @click="close">Close Modal</button>
  </client-only>
</template>

useAppKitAccount

Hook for accessing account data.

<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { address, caipAddress, isConnected, status } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Address: {{ address }}</p>
      <p>CAIP Address: {{ caipAddress }}</p>
      <p>Status: {{ status }}</p>
    </div>
    <div v-else>
      <p>Not connected</p>
    </div>
  </client-only>
</template>

useAppKitConnection

Hook for accessing Solana connection.

<script setup lang="ts">
import { useAppKitConnection, useAppKitAccount } from '@reown/appkit/vue'
import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from '@solana/web3.js'

const { connection } = useAppKitConnection()
const { address } = useAppKitAccount()

async function getBalance() {
  if (!connection || !address.value) return
  
  const publicKey = new PublicKey(address.value)
  const balance = await connection.getBalance(publicKey)
  console.log('Balance:', balance / LAMPORTS_PER_SOL, 'SOL')
}

async function sendTransaction() {
  if (!connection || !address.value) return
  
  const fromPubkey = new PublicKey(address.value)
  const toPubkey = new PublicKey('11111111111111111111111111111112')
  
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey,
      toPubkey,
      lamports: LAMPORTS_PER_SOL * 0.001
    })
  )
  
  // Sign and send transaction
  console.log('Transaction created:', transaction)
}
</script>

<template>
  <client-only>
    <button @click="getBalance">Get Balance</button>
    <button @click="sendTransaction">Send Transaction</button>
  </client-only>
</template>

useAppKitProvider

Hook for accessing the Solana provider.

<script setup lang="ts">
import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/vue'
import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js'

const { walletProvider } = useAppKitProvider('solana')
const { address } = useAppKitAccount()

async function signMessage() {
  if (!walletProvider || !address.value) return
  
  const message = new TextEncoder().encode('Hello World!')
  const signature = await walletProvider.signMessage(message)
  console.log('Signature:', signature)
}

async function signTransaction() {
  if (!walletProvider || !address.value) return
  
  const fromPubkey = new PublicKey(address.value)
  const toPubkey = new PublicKey('11111111111111111111111111111112')
  
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey,
      toPubkey,
      lamports: LAMPORTS_PER_SOL * 0.001
    })
  )
  
  const signedTransaction = await walletProvider.signTransaction(transaction)
  console.log('Signed transaction:', signedTransaction)
}
</script>

<template>
  <client-only>
    <button @click="signMessage">Sign Message</button>
    <button @click="signTransaction">Sign Transaction</button>
  </client-only>
</template>

Program Interaction

<script setup lang="ts">
import { useAppKitConnection, useAppKitProvider } from '@reown/appkit/vue'
import { PublicKey, Transaction, TransactionInstruction } from '@solana/web3.js'

const { connection } = useAppKitConnection()
const { walletProvider } = useAppKitProvider('solana')

async function callProgram() {
  if (!connection || !walletProvider) return
  
  const programId = new PublicKey('YourProgramIdHere')
  const instruction = new TransactionInstruction({
    keys: [],
    programId,
    data: Buffer.from([])
  })
  
  const transaction = new Transaction().add(instruction)
  const signedTransaction = await walletProvider.signTransaction(transaction)
  
  const txid = await connection.sendRawTransaction(signedTransaction.serialize())
  console.log('Transaction ID:', txid)
}
</script>

<template>
  <client-only>
    <button @click="callProgram">Call Program</button>
  </client-only>
</template>

Fundamentals

Authentication

Transactions

useAppKit

useAppKitAccount

useAppKitNetwork

useAppKitState

useAppKitTheme

useDisconnect

Wagmi Actions

useAppKit

useAppKitAccount

useAppKitNetwork

useAppKitState

useAppKitTheme

useDisconnect

Wagmi Actions

useAppKit

useAppKitAccount

useAppKitProvider

Contract Interaction

useAppKit

useAppKitAccount

useAppKitConnection

useAppKitProvider

Program Interaction

Fundamentals

Authentication

Transactions

​useAppKit

​useAppKitAccount

​useAppKitNetwork

​useAppKitState

​useAppKitTheme

​useDisconnect

​Wagmi Actions

​useAppKit

​useAppKitAccount

​useAppKitNetwork

​useAppKitState

​useAppKitTheme

​useDisconnect

​Wagmi Actions

​useAppKit

​useAppKitAccount

​useAppKitProvider

​Contract Interaction

​useAppKit

​useAppKitAccount

​useAppKitConnection

​useAppKitProvider

​Program Interaction

useAppKit

useAppKitAccount

useAppKitNetwork

useAppKitState

useAppKitTheme

useDisconnect

Wagmi Actions

useAppKit

useAppKitAccount

useAppKitNetwork

useAppKitState

useAppKitTheme

useDisconnect

Wagmi Actions

useAppKit

useAppKitAccount

useAppKitProvider

Contract Interaction

useAppKit

useAppKitAccount

useAppKitConnection

useAppKitProvider

Program Interaction