> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Composables

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.
</Note>

## useAppKit

Composable function for controlling the modal.

```ts theme={null}
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

```ts theme={null} theme={null} theme={null}
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'
  }
})

// to open wallet send interface
open({ view: 'WalletSend' })
```

List of views you can select

<Table
  headers={["Variable", "Description"]}
  data={[
{
variable: { code: "Connect" },
description:
"Principal view of the modal - default view when disconnected. A `namespace` can be selected to connect to a specific network (solana, bip122 or eip155)",
},
{
variable: { code: "Account" },
description: "User profile - default view when connected",
},
{
variable: { code: "AllWallets" },
description: "Shows the list of all available wallets",
},
{
variable: { code: "Networks" },
description:
"List of available networks - you can select and target a specific network before connecting",
},
{
variable: { code: "WhatIsANetwork" },
description: '"What is a network" onboarding view',
},
{
variable: { code: "WhatIsAWallet" },
description: '"What is a wallet" onboarding view',
},
{
variable: { code: "OnRampProviders" },
description: "On-Ramp main view",
},
{
variable: { code: "WalletSend" },
description: "Token sending interface that allows users to send tokens to another address",
},
{
variable: { code: "Swap" },
description: "Swap main view",
},
{
variable: { code: "ProfileWallets" },
description: "View for managing connected wallets in the user profile",
},
]}
/>

## useAppKitAccount

Composable function for accessing account data and connection status.

```ts theme={null}
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.

```ts theme={null}
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.

```ts theme={null}
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

```ts theme={null}
import { polygon } from '@reown/appkit/networks'

...

networkData.switchNetwork(polygon)
```

<Note>
  See how to import or create a networks
  [here](/appkit/nuxt/core/custom-networks).
</Note>

## useAppKitState

Composable function for getting the current value of the modal's state.

```ts theme={null}
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.

```ts theme={null}
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

```ts theme={null}
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.

```ts theme={null}
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:

```ts theme={null}
{
  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

<Card title="Full events reference" icon="list" href="/appkit/features/events">
  See every available event, its trigger condition, and the properties payload.
</Card>

## useDisconnect

Composable function for disconnecting the session.

```ts theme={null}
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.

```ts theme={null}
import { useWalletInfo } from '@reown/appkit/vue'


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

## Ethereum/Solana Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/actions/getAccount) to sign messages, interact with smart contracts, and much more.

    ### getAccount

    Action for accessing account data and connection status.

    ```tsx theme={null} theme={null} theme={null}
    import { getAccount } from "@wagmi/core";

    const account = getAccount();
    ```

    ### signMessage

    Action for signing messages with connected account.

    ```ts theme={null} theme={null} theme={null}
    import { signMessage } from "@wagmi/core";

    const signature = await signMessage({
      message: "gm wagmi frens",
    });
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    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>;
    }
    ```

    <Card title="Learn More" href="https://wagmi.sh/core/actions/readContract" />
  </Tab>

  <Tab title="Ethers">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    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`.

    ```tsx theme={null} theme={null} theme={null}
    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

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Ethers v5">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    const { address, status, isConnected } = useAppKitAccount();
    ```

    ### switchNetwork

    ```tsx theme={null} theme={null} theme={null}
    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`.

    ```tsx theme={null} theme={null} theme={null}
    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

    ```ts theme={null} theme={null} theme={null}
    function Components() {
      const error = modal.getError();
      //...
    }
    ```

    <Card title="Learn More About Ethers" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>

  <Tab title="Solana">
    ### useAppKitAccount

    Hook that returns the client's information.

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitAccount } from "@reown/appkit/vue";

    function Components() {
      const { address, caipAddress, isConnected } = useAppKitAccount();

      //...
    }
    ```

    ### useAppKitProvider

    Hook that returns the `walletProvider` and the `WalletProviderType`.

    ```tsx theme={null} theme={null} theme={null}
    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](https://solana-labs.github.io/solana-web3.js/classes/Connection.html)

    ```tsx theme={null} theme={null} theme={null}
    import { useAppKitConnection } from '@reown/appkit-adapter-solana/vue'

    ...

    const { connection } = useAppKitConnection()
    ```
  </Tab>
</Tabs>