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'
  }
})

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

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'
  }
})

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