Composables - Reown Docs

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

Note

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

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 viewopen({ view: "Connect" });// to connect and show only solana walletsopen({ view: "Connect", namespace: "solana" });// to connect and show only bitcoin walletsopen({ view: "Connect", namespace: "bip122" });// to connect and show only ethereum walletsopen({ view: "Connect", namespace: "eip155" });// to open swap with argumentsopen({  view: 'Swap',  arguments: {    amount: '321.123',    fromToken: 'USDC',    toToken: 'ETH'  }})// to open wallet send interfaceopen({ view: 'WalletSend' })

List of views you can select

<Table> — not implemented in this renderer

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 chainsconst 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

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)

Note

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.open: Boolean that indicates if the modal is open
stateData.selectedNetworkId: The current chain id selected by the user

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({  "--apkt-color-mix": "#00BB7F",  "--apkt-color-mix-strength": 40,});

useAppKitEvents#

Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.

import { useAppKitEvents } from "@reown/appkit/vue";const events = useAppKitEvents();

The composable returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:

{  timestamp: number  data: {    type: 'track' | 'error'    event: string        // the event name    properties?: object  // event-specific payload  }}

Returns#

events.timestamp: Get the timestamp of the event
events.data.event: Get the event name string
events.data.properties: Get event-specific payload

Full events reference

See every available event, its trigger condition, and the properties payload.

useDisconnect#

Composable function for disconnecting the session.

import { useDisconnect } from "@reown/appkit/vue";const { disconnect } = useDisconnect();// Disconnect from all namespacesawait disconnect();// Disconnect from specific namespaceawait disconnect({ namespace: 'eip155' }); // Disconnect from Ethereumawait disconnect({ namespace: 'solana' }); // Disconnect from Solanaawait 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()}

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

useAppKitAccount#

Hook that returns the client's information.

import { useAppKitAccount } from "@reown/appkit/vue";const { address, status, isConnected } = useAppKitAccount();

switchNetwork#

import { createAppKit } from "@reown/appkit/vue";import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";const modal = createAppKit({  adapters: [wagmiAdapter],  projectId,  networks: [mainnet, arbitrum],  metadata: metadata,  features: {    analytics: true,  },});modal.switchNetwork(polygon);

useAppKitProvider#

Hook that returns the walletProvider and the WalletProviderType.

import { BrowserProvider } from "ethers";import { useAppKitProvider } from "@reown/appkit/vue";function Components() {  const { walletProvider } = useAppKitProvider("eip155");  async function onSignMessage() {    const provider = new BrowserProvider(walletProvider);    const signer = await provider.getSigner();    const signature = await signer?.signMessage("Hello AppKit Ethers");    console.log(signature);  }  return <button onClick={() => onSignMessage()}>Sign Message</button>;}

getError#

function Components() {  const error = modal.getError();  //...}

Learn More About Ethers

useAppKitAccount#

Hook that returns the client's information.

import { useAppKitAccount } from "@reown/appkit/vue";const { address, status, isConnected } = useAppKitAccount();

switchNetwork#

import { createAppKit } from "@reown/appkit/vue";import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";const modal = createAppKit({  adapters: [wagmiAdapter],  projectId,  networks: [mainnet, arbitrum],  metadata: metadata,  features: {    analytics: true,  },});modal.switchNetwork(polygon);

useAppKitProvider#

Hook that returns the walletProvider and the WalletProviderType.

import {  useAppKitAccount,  useAppKitProvider,  useAppKitNetwork,} from "@reown/appkit/vue";import { ethers } from "ethers";import { useAppKitProvider } from "@reown/appkit/vue";function Components() {  const { walletProvider } = useAppKitProvider("eip155");  const { address } = useAppKitAccount();  const { chainId } = useAppKitNetwork();  async function onSignMessage() {    const provider = new ethers.providers.Web3Provider(walletProvider, chainId);    const signer = provider.getSigner(address);    const signature = await signer?.signMessage("Hello AppKit Ethers");    console.log(signature);  }  return <button onClick={() => onSignMessage()}>Sign Message</button>;}

getError#

function Components() {  const error = modal.getError();  //...}

Learn More About Ethers

useAppKitAccount#

Hook that returns the client's information.

import { useAppKitAccount } from "@reown/appkit/vue";function Components() {  const { address, caipAddress, isConnected } = useAppKitAccount();  //...}

useAppKitProvider#

Hook that returns the walletProvider and the WalletProviderType.

import { useAppKitAccount, useAppKitProvider } from "@reown/appkit/vue";import type { Provider } from "@reown/appkit-adapter-solana";function SignMessage() {  // 0. Get account and provider  const { address } = useAppKitAccount();  const { walletProvider } = useAppKitProvider<Provider>("solana");  // 1. Create a function to sign a message  async function onSignMessage() {    try {      if (!walletProvider || !address) {        throw Error("user is disconnected");      }      // 2. Encode message and sign it      const encodedMessage = new TextEncoder().encode("Hello from AppKit");      const signature = await walletProvider.signMessage(encodedMessage);      console.log(signature);    } catch (err) {      // Handle Error Here    }  }  // 3. Create a button to trigger the function  return <button onClick={onSignMessage}>Sign Message</button>;}

useAppKitConnection#

Hook that returns the connection object. More info about Connection Class

import { useAppKitConnection } from '@reown/appkit-adapter-solana/vue'...const { connection } = useAppKitConnection()