Composables

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

List of views you can select

Variable	Description
Connect	Principal view of the modal - default view when disconnected
Account	User profile - default view when connected
AllWallets	Shows the list of all available wallets
Networks	List of available networks - you can select and target a specific network before connecting
WhatIsANetwork	"What is a network" onboarding view
WhatIsAWallet	"What is a wallet" onboarding view
OnRampProviders	"On-Ramp main view
Swap	"Swap main view

useAppKitAccount

Composable function for accessing account data and connection status.

import { useAppKitAccount } from "@reown/appkit/vue";

export default Component(){
  const accountData = useAppKitAccount()
}

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)

info

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

await disconnect()

useWalletInfo

Composable function for accessing wallet information.

import { useWalletInfo } from '@reown/appkit/vue'


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

Ethereum/Solana Library

Wagmi

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

Learn More

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

Ethers v5

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

Solana

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