Composables - Reown Docs

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

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

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.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({
  "--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()
}

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

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()

On this page

useAppKit
Returns
Parameters
useAppKitAccount
Returns
useAppKitNetwork
Returns
switchNetwork Usage
useAppKitState
Returns
useAppKitTheme
Returns
Example Usage
useAppKitEvents
Returns
useDisconnect
Parameters
Use Cases
useWalletInfo
Ethereum/Solana Library

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

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

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.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({
  "--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()
}

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

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()

On this page

useAppKit
Returns
Parameters
useAppKitAccount
Returns
useAppKitNetwork
Returns
switchNetwork Usage
useAppKitState
Returns
useAppKitTheme
Returns
Example Usage
useAppKitEvents
Returns
useDisconnect
Parameters
Use Cases
useWalletInfo
Ethereum/Solana Library

​useAppKit

​Returns

​Parameters

​useAppKitAccount

​Returns

​useAppKitNetwork

​Returns

​switchNetwork Usage

​useAppKitState

​Returns

​useAppKitTheme

​Returns

​Example Usage

​useAppKitEvents

​Returns

​useDisconnect

​Parameters

​Use Cases

​useWalletInfo

​Ethereum/Solana Library

​getAccount

​signMessage

​useAppKitProvider

Learn More

​getAccount

​signMessage

​useAppKitProvider

Learn More

​useAppKitAccount

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

​useAppKitAccount

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

​useAppKitAccount

​useAppKitProvider

​useAppKitConnection

Cloud

​useAppKit

​Returns

​Parameters

​useAppKitAccount

​Returns

​useAppKitNetwork

​Returns

​switchNetwork Usage

​useAppKitState

​Returns

​useAppKitTheme

​Returns

​Example Usage

​useAppKitEvents

​Returns

​useDisconnect

​Parameters

​Use Cases

​useWalletInfo

​Ethereum/Solana Library

​getAccount

​signMessage

​useAppKitProvider

Learn More

​getAccount

​signMessage

​useAppKitProvider

Learn More

​useAppKitAccount

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

​useAppKitAccount

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

useAppKit

Returns

Parameters

useAppKitAccount

Returns

useAppKitNetwork

Returns

switchNetwork Usage

useAppKitState

Returns

useAppKitTheme

Returns

Example Usage

useAppKitEvents

Returns

useDisconnect

Parameters

Use Cases

useWalletInfo

Ethereum/Solana Library

getAccount

signMessage

useAppKitProvider

getAccount

signMessage

useAppKitProvider

useAppKitAccount

switchNetwork

useAppKitProvider

getError

useAppKitAccount

switchNetwork

useAppKitProvider

getError

useAppKitAccount

useAppKitProvider

useAppKitConnection

useAppKit

Returns

Parameters

useAppKitAccount

Returns

useAppKitNetwork

Returns

switchNetwork Usage

useAppKitState

Returns

useAppKitTheme

Returns

Example Usage

useAppKitEvents

Returns

useDisconnect

Parameters

Use Cases

useWalletInfo

Ethereum/Solana Library

getAccount

signMessage

useAppKitProvider

getAccount

signMessage

useAppKitProvider

useAppKitAccount

switchNetwork

useAppKitProvider

getError

useAppKitAccount

switchNetwork

useAppKitProvider

getError

useAppKitAccount

useAppKitProvider

useAppKitConnection