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 modalclose: 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 addressaccountData.value.caipAddress: The current account address in CAIP formataccountData.value.isConnected: Boolean that indicates if the user is connectedaccountData.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 objectnetworkData.caipNetworkId: The current network id in CAIP formatnetworkData.chainId: The current chain idnetworkData.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 openstateData.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 eventevents.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 Wagmi Ethers Ethers v5 Solana 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 > ; } 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 > ; } 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 (); //... } 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 (); //... } 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 () 