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

​
useAppKit

Composable function for controlling the modal. 
import { useAppKit } from "@reown/appkit/vue";

export default function Component() {
  const { open, close } = useAppKit();
}

​
Returns

  • open: Function to open the modal
  • close: Function to close the modal

​
Parameters

You can also select the modal’s view when calling the open function 
open({ view: "Account" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
open({ view: "Connect", namespace: "eip155" });

// to open swap with arguments
open({
  view: 'Swap',
  arguments: {
    amount: '321.123',
    fromToken: 'USDC',
    toToken: 'ETH'
  }
})

// to open wallet send interface
open({ view: 'WalletSend' })
List of views you can select

​
useAppKitAccount

Composable function for accessing account data and connection status. 
import { useAppKitAccount } from "@reown/appkit/vue";

const accountData = useAppKitAccount();
Composable function for accessing account data and connection status for each namespace when working in a multi-chain environment. 
import { useAppKitAccount } from "@reown/appkit/vue";

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin

​
Returns

  • accountData.value.address: The current account address
  • accountData.value.caipAddress: The current account address in CAIP format
  • accountData.value.isConnected: Boolean that indicates if the user is connected
  • accountData.value.status: The current connection status

​
Getting Bitcoin Public Keys

When working with Bitcoin accounts, you can extract public keys from the connected accounts: 
<template>
  <div>
    <div v-for="(key, index) in publicKeys" :key="index">
      Public Key: {{ key }}
    </div>
  </div>
</template>

<script setup>
import { useAppKitAccount } from "@reown/appkit/vue";
import { computed } from 'vue';

const { allAccounts } = useAppKitAccount({ chainNamespace: 'bip122' });
const publicKeys = computed(() => allAccounts.value.map(acc => acc.publicKey));
</script>
This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.

​
useAppKitNetwork

Composable function for accessing network data and methods. 
import { useAppKitNetwork } from "@reown/appkit/vue";

export default Component(){
  const networkData = useAppKitNetwork()
}

​
Returns

  • networkData.caipNetwork: The current network object
  • networkData.caipNetworkId: The current network id in CAIP format
  • networkData.chainId: The current chain id
  • networkData.switchNetwork: Function to switch the network. Accepts a caipNetwork object as argument.

​
switchNetwork Usage

import { polygon } from '@reown/appkit/networks'

...

networkData.switchNetwork(polygon)
See how to import or create a networks here.

​
useAppKitState

Composable function for getting the current value of the modal’s state. 
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();

​
Returns

  • stateData.initialized: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is ready
  • stateData.loading: Boolean that indicates if AppKit is loading
  • stateData.open: Boolean that indicates if the modal is open
  • stateData.selectedNetworkId: The current chain id selected by the user in CAIP-2 format
  • stateData.activeChain: The active chain namespace (e.g., ‘eip155’, ‘solana’, ‘bip122’)

​
Example Usage

<template>
  <div>
    <div v-if="!stateData.initialized">Initializing AppKit...</div>
    <div v-else-if="stateData.loading">Loading...</div>
    <div v-else>
      <p>Modal is {{ stateData.open ? 'open' : 'closed' }}</p>
      <p>Selected Network: {{ stateData.selectedNetworkId }}</p>
      <p>Active Chain: {{ stateData.activeChain }}</p>
    </div>
  </div>
</template>

<script setup>
import { useAppKitState } from "@reown/appkit/vue";

const stateData = useAppKitState();
</script>

​
useAppKitTheme

Composable function for controlling the modal’s theme. 
import { useAppKitTheme } from "@reown/appkit/vue";
const themeAction = useAppKitTheme();
// or
// const { setThemeMode, setThemeVariables } = useAppKitTheme()

​
Returns

  • themeAction.themeMode: Get theme Mode.
  • themeAction.themeVariables: Get theme variables.
  • themeAction.setThemeMode: Set theme Mode. Accepts a string as parameter (‘dark’ | ‘light’)
  • themeAction.setThemeVariables: Set theme variables. Check the example usage.

​
Example Usage

setThemeMode("dark");

setThemeVariables({
  "--w3m-color-mix": "#00BB7F",
  "--w3m-color-mix-strength": 40,
});

​
useAppKitEvents

Composable function for subscribing to modal events. 
import { useAppKitEvents } from "@reown/appkit/vue";

const events = useAppKitEvents();

​
Returns

  • events.timestamp: Get the timestamp of the event
  • events.data.event: Get string of the event.
  • events.data.properties: get more information from the event.

​
useDisconnect

Composable function for disconnecting the session. 
import { useDisconnect } from "@reown/appkit/vue";

const { disconnect } = useDisconnect();

// Disconnect from all namespaces
await disconnect();

// Disconnect from specific namespace
await disconnect({ namespace: 'eip155' }); // Disconnect from Ethereum
await disconnect({ namespace: 'solana' }); // Disconnect from Solana
await disconnect({ namespace: 'bip122' }); // Disconnect from Bitcoin

​
Parameters

  • namespace (optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.

​
Use Cases

  • Implementing a “Disconnect Wallet” button
  • Handling logout flows in your application
  • Cleaning up resources when a user disconnects
  • Resetting application state after disconnection
  • Disconnecting from specific chains in multi-chain applications

​
useWalletInfo

Composable function for accessing wallet information. 
import { useWalletInfo } from '@reown/appkit/vue'


export default Component(){
  const { walletInfo } = useWalletInfo()
}

​
useAppKitProvider

Composable function that returns the walletProvider and the WalletProviderType for interacting with the connected wallet across different blockchain adapters. 
import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

const { walletProvider } = useAppKitProvider<Provider>("eip155");

​
Use Cases

  • Direct wallet interactions (signing messages, sending transactions)
  • Access to wallet-specific methods and properties
  • Integration with blockchain libraries (Ethers, Wagmi, Solana Web3.js)

​
Examples

import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

const { walletProvider } = useAppKitProvider<Provider>("eip155");

​
Returns

  • walletProvider: The wallet provider instance for the specified chain namespace
  • walletProviderType: The type of wallet provider currently connected

​
Ethereum/Solana Library

You can use Wagmi actions to sign messages, interact with smart contracts, and much more.

​
getAccount

Action for accessing account data and connection status.
import { getAccount } from "@wagmi/core";

const account = getAccount();

​
signMessage

Action for signing messages with connected account.
import { signMessage } from "@wagmi/core";

const signature = await signMessage({
  message: "gm wagmi frens",
});

​
useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.
import { useAppKitProvider } from "@reown/appkit/vue";
import type { Provider } from "@reown/appkit/vue";

function Components() {
  const { walletProvider } = useAppKitProvider<Provider>("eip155");

  async function onSignMessage() {
    console.log(walletProvider);
  }

  return <button onClick={() => onSignMessage()}>Sign Message</button>;
}

Learn More