> ## Documentation Index
> Fetch the complete documentation index at: https://reown-5552f0bb-devin-1759771246-appkit-1-8-9-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

# Nuxt

AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana and Bitcoin.
Choose one of these to get started.

<Note>
  AppKit for Nuxt requires SSR compatibility considerations. Make sure to use the `<client-only>` wrapper and configure your Nuxt app appropriately.
</Note>

## Installation

<Tabs>
  <Tab title="Wagmi">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @wagmi/vue @tanstack/vue-query
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @wagmi/vue @tanstack/vue-query
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Ethers">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Solana">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-solana
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-solana
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Bitcoin">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Yarn theme={null}
      yarn add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash Bun theme={null}
      bun add @reown/appkit @reown/appkit-adapter-bitcoin
      ```

      ```bash pnpm theme={null}
      pnpm add @reown/appkit @reown/appkit-adapter-bitcoin
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Cloud Configuration

Create a new project on Reown Dashboard at [https://dashboard.reown.com](https://dashboard.reown.com) and obtain a new project ID.

<Info>
  **Don't have a project ID?**

  Head over to Reown Dashboard and create a new project now!

  <Card title="Get started" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks" />
</Info>

## Implementation

<Tabs>
  <Tab title="Wagmi">
    <Card title="Nuxt Wagmi Example" icon="github" href="https://github.com/reown-com/appkit/tree/main/examples/nuxt-wagmi-solana-bitcoin">
      Check the Nuxt Wagmi example
    </Card>

    For this example, we'll be using **Wagmi** and **Viem** with Nuxt.

    First, configure your Nuxt application for SSR compatibility by updating your `nuxt.config.ts`:

    ```javascript theme={null}
    export default defineNuxtConfig({
      ssr: false,
      modules: ['@wagmi/vue/nuxt'],
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Create Nuxt plugins for vue-query and wagmi setup:

    ```javascript theme={null}
    // plugins/1.vue-query.ts
    import { defineNuxtPlugin } from '#imports'
    import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

    export default defineNuxtPlugin(nuxt => {
      const queryClient = new QueryClient({
        defaultOptions: { queries: { staleTime: 5000 } }
      })

      nuxt.vueApp.use(VueQueryPlugin, {
        queryClient,
        enableDevtoolsV6Plugin: true
      })
    })
    ```

    ```javascript theme={null}
    // plugins/2.wagmi.ts
    import { WagmiPlugin } from '@wagmi/vue'
    import { defineNuxtPlugin } from 'nuxt/app'
    import { wagmiAdapter } from '~/config/appkit'

    export default defineNuxtPlugin(nuxtApp => {
      nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiAdapter.wagmiConfig })
    })
    ```

    Create your AppKit configuration:

    ```javascript theme={null}
    // config/appkit.ts
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    import { mainnet, arbitrum } from '@reown/appkit/networks'

    export const projectId = process.env.NUXT_PROJECT_ID || 'YOUR_PROJECT_ID'

    export const networks = [mainnet, arbitrum]

    export const wagmiAdapter = new WagmiAdapter({
      networks,
      projectId
    })
    ```

    Then in your `app.vue` file, set up AppKit:

    ```javascript theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { wagmiAdapter, networks, projectId } from './config/appkit'

    createAppKit({
      adapters: [wagmiAdapter],
      networks,
      projectId,
      metadata: {
        name: 'AppKit Nuxt Wagmi Example',
        description: 'AppKit Nuxt Wagmi Example',
        url: 'https://reown.com/appkit',
        icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Wagmi Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Note>
      Make sure to set your `NUXT_PROJECT_ID` environment variable which you can get from [Reown Dashboard](https://dashboard.reown.com).
    </Note>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Ethers">
    In your Nuxt application, set up the following configuration for Ethers integration.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Then in your `app.vue` file set up the following configuration:

    ```javascript theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { EthersAdapter } from '@reown/appkit-adapter-ethers'
    import { mainnet, arbitrum } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const metadata = {
      name: 'My Nuxt App',
      description: 'My Nuxt App description',
      url: 'https://mywebsite.com',
      icons: ['https://avatars.mywebsite.com/']
    }

    createAppKit({
      adapters: [new EthersAdapter()],
      networks: [mainnet, arbitrum],
      metadata,
      projectId,
      features: {
        analytics: true
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Ethers Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Warning>
      Make sure that the `url` from the `metadata` matches your domain and subdomain. This will later be used by the **Verify API** to tell wallets if your application has been verified or not.
    </Warning>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Solana">
    In your Nuxt application, set up the following configuration for Solana integration.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    Then in your `app.vue` file set up the following configuration:

    ```javascript theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit-solana/vue'
    import { SolanaAdapter } from '@reown/appkit-adapter-solana'
    import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const metadata = {
      name: 'AppKit Nuxt',
      description: 'AppKit Nuxt Solana Example',
      url: 'https://example.com',
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    const solanaWeb3JsAdapter = new SolanaAdapter()

    createAppKit({
      adapters: [solanaWeb3JsAdapter],
      metadata,
      networks: [solana, solanaTestnet, solanaDevnet],
      projectId
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Solana Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    <Warning>
      Make sure that the `url` from the `metadata` matches your domain and subdomain. This will later be used by the **Verify API** to tell wallets if your application has been verified or not.
    </Warning>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>

  <Tab title="Bitcoin">
    AppKit Bitcoin provides a set of Vue components and composables to easily connect Bitcoin wallets with your Nuxt application.

    First, configure your `nuxt.config.ts` for SSR compatibility:

    ```javascript theme={null}
    export default defineNuxtConfig({
      ssr: false,
      runtimeConfig: {
        public: {
          projectId: process.env.NUXT_PROJECT_ID
        }
      }
    })
    ```

    In your `app.vue` file set up the following configuration:

    ```javascript theme={null}
    <script setup lang="ts">
    import { createAppKit } from '@reown/appkit/vue'
    import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
    import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

    const config = useRuntimeConfig()
    const projectId = config.public.projectId

    const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

    const bitcoinAdapter = new BitcoinAdapter({
      projectId
    })

    const metadata = {
      name: 'AppKit Nuxt',
      description: 'AppKit Nuxt Bitcoin Example',
      url: 'https://example.com',
      icons: ['https://avatars.githubusercontent.com/u/179229932']
    }

    createAppKit({
      adapters: [bitcoinAdapter],
      networks,
      metadata,
      projectId,
      features: {
        analytics: true,
        email: false,
        socials: []
      }
    })
    </script>

    <template>
      <client-only>
        <div class="page-container">
          <h1>Nuxt Bitcoin Example</h1>
          <appkit-button />
        </div>
      </client-only>
    </template>
    ```

    ## Bitcoin Provider Interface

    ```ts theme={null}
    export interface BitcoinConnector extends ChainAdapterConnector, Provider {
      getAccountAddresses(): Promise<BitcoinConnector.AccountAddress[]>;
      signMessage(params: BitcoinConnector.SignMessageParams): Promise<string>;
      sendTransfer(params: BitcoinConnector.SendTransferParams): Promise<string>;
      signPSBT(
        params: BitcoinConnector.SignPSBTParams
      ): Promise<BitcoinConnector.SignPSBTResponse>;
    }
    ```

    ### Parameters

    <Tabs>
      <Tab title="SignMessageParams">
        ```ts theme={null}
          export type SignMessageParams = {
            /**
             * The message to be signed
             */
            message: string
            /**
             * The address to sign the message with
             */
            address: string
          }
        ```
      </Tab>

      <Tab title="SendTransferParams">
        ```ts theme={null}
          export type SendTransferParams = {
            /**
             * The amount to be sent in satoshis
             */
            amount: string
            /**
             * The address to send the transfer to
             */
            recipient: string
          }
        ```
      </Tab>

      <Tab title="SignPSBTParams">
        ```ts theme={null}
          export type SignPSBTParams = {
            /**
             * The PSBT to be signed, string base64 encoded
             */
            psbt: string
            signInputs: {
              /**
               * The address whose private key to use for signing.
               */
              address: string
              /**
               * Specifies which input to sign
               */
              index: number
              /**
               * Specifies which part(s) of the transaction the signature commits to
               */
              sighashTypes: number[]
            }[]

            /**
             * If `true`, the PSBT will be broadcasted after signing. Default is `false`.
             */
            broadcast?: boolean

        }

        ```
      </Tab>
    </Tabs>

    ### Responses

    <Tabs>
      <Tab title="AccountAddress">
        ```ts theme={null}
          export type AccountAddress = {
            /**
             * Public address belonging to the account.
             */
            address: string
            /**
             * Public key for the derivation path in hex, without 0x prefix
             */
            publicKey?: string
            /**
             * The derivation path of the address e.g. "m/84'/0'/0'/0/0"
             */
            path?: string
            /**
             * The purpose of the address
             */
            purpose: 'payment' | 'ordinal' | 'stx'
          }
        ```
      </Tab>

      <Tab title="SignPSBTResponse">
        ```ts theme={null}
          export type SignPSBTResponse = {
            /**
             * The signed PSBT, string base64 encoded
             */
            psbt: string
            /**
             * The `string` transaction id of the broadcasted transaction or `undefined` if not broadcasted
             */
            txid?: string
          }
        ```
      </Tab>
    </Tabs>

    <Note>
      The `ssr: false` configuration and `<client-only>` wrapper ensure AppKit works correctly with Nuxt's SSR environment.
    </Note>
  </Tab>
</Tabs>

## Trigger the modal

The recommended way to trigger the modal in Nuxt is to use the `<appkit-button />` web component wrapped in `<client-only>` for SSR compatibility:

```javascript theme={null}
<template>
  <client-only>
    <div class="appkit-buttons-container">
      <appkit-button />
    </div>
  </client-only>
</template>
```

The `<appkit-button />` is a web component that's automatically registered when AppKit is initialized. The `<client-only>` wrapper ensures it only renders on the client side, preventing SSR hydration issues.

### Alternative approaches

You can also trigger the modal programmatically using the AppKit composables:

```javascript theme={null}
<script setup lang="ts">
import { useAppKit } from '@reown/appkit/vue';

const { open } = useAppKit();

function openModal() {
  open();
}

function openConnectModal() {
  open({ view: 'Connect' });
}

function openAccountModal() {
  open({ view: 'Account' });
}
</script>

<template>
  <client-only>
    <button @click="openModal">Open Modal</button>
    <button @click="openConnectModal">Connect Wallet</button>
    <button @click="openAccountModal">View Account</button>
  </client-only>
</template>
```

Or use other AppKit web components:

```javascript theme={null}
<template>
  <client-only>
    <appkit-connect-button />
    <appkit-account-button />
    <appkit-network-button />
  </client-only>
</template>
```

<Tabs>
  <Tab title="Wagmi">
    To open AppKit you can use our [**web component**](/appkit/nuxt/core/components) or build your own button with AppKit [**composables**](/appkit/nuxt/core/composables#useAppKit).

    <Tabs>
      <Tab title="Web Components">
        Web components are global html elements that don't require importing. Make sure to wrap them in `<client-only>` for SSR compatibility.

        ```javascript theme={null}
        <template>
          <client-only>
            <appkit-button />
          </client-only>
        </template>
        ```

        <Info>
          You can also use `<appkit-connect-button>` and `<appkit-account-button>` components.
        </Info>
      </Tab>

      <Tab title="Composables">
        You can trigger the modal by calling the `open` method from `useAppKit` composable.

        ```javascript theme={null}
        <script setup lang="ts">
        import { useAppKit } from '@reown/appkit/vue'

        const { open } = useAppKit()

        function openModal() {
          open()
        }
        </script>

        <template>
          <client-only>
            <button @click="openModal">Open Modal</button>
          </client-only>
        </template>
        ```

        Learn more about the AppKit composables [here](/appkit/nuxt/core/composables)
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Ethers">
    You can trigger the modal by calling the `open` method from AppKit composables.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit/vue'

    const { open } = useAppKit()

    function openModal() {
      open()
    }
    </script>

    <template>
      <client-only>
        <button @click="openModal">Open Modal</button>
      </client-only>
    </template>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit/vue'

    const { open } = useAppKit()

    function openConnectModal() {
      open({ view: 'Connect' })
    }

    function openAccountModal() {
      open({ view: 'Account' })
    }
    </script>

    <template>
      <client-only>
        <button @click="openConnectModal">Connect Wallet</button>
        <button @click="openAccountModal">View Account</button>
      </client-only>
    </template>
    ```
  </Tab>

  <Tab title="Solana">
    You can trigger the modal by calling the `open` method from AppKit composables.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit-solana/vue'

    const { open } = useAppKit()

    function openModal() {
      open()
    }
    </script>

    <template>
      <client-only>
        <button @click="openModal">Open Modal</button>
      </client-only>
    </template>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit-solana/vue'

    const { open } = useAppKit()

    function openConnectModal() {
      open({ view: 'Connect' })
    }

    function openAccountModal() {
      open({ view: 'Account' })
    }
    </script>

    <template>
      <client-only>
        <button @click="openConnectModal">Connect Wallet</button>
        <button @click="openAccountModal">View Account</button>
      </client-only>
    </template>
    ```
  </Tab>

  <Tab title="Bitcoin">
    You can trigger the modal by calling the `open` method from AppKit composables.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit/vue'

    const { open } = useAppKit()

    function openModal() {
      open()
    }
    </script>

    <template>
      <client-only>
        <button @click="openModal">Open Modal</button>
      </client-only>
    </template>
    ```

    You can also select the modal's view when calling the `open` function.

    ```javascript theme={null}
    <script setup lang="ts">
    import { useAppKit } from '@reown/appkit/vue'

    const { open } = useAppKit()

    function openConnectModal() {
      open({ view: 'Connect' })
    }

    function openAccountModal() {
      open({ view: 'Account' })
    }
    </script>

    <template>
      <client-only>
        <button @click="openConnectModal">Connect Wallet</button>
        <button @click="openAccountModal">View Account</button>
      </client-only>
    </template>
    ```
  </Tab>
</Tabs>

## Blockchain Interaction

<Tabs>
  <Tab title="Wagmi">
    You need to install @wagmi/core to interact with smart contracts:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @wagmi/core
      ```

      ```bash Yarn theme={null}
      yarn add @wagmi/core
      ```

      ```bash Bun theme={null}
      bun add @wagmi/core
      ```

      ```bash pnpm theme={null}
      pnpm add @wagmi/core
      ```
    </CodeGroup>

    [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts:

    For this use case, we need to import the `wagmiConfig` from our AppKit WagmiAdapter configuration.

    ```ts theme={null}
    import { readContract } from "@wagmi/core";
    import { USDTAbi } from "../abi/USDTAbi";

    const USDTAddress = "0x...";

    const data = readContract(wagmiConfig, {
      address: USDTAddress,
      abi: USDTAbi,
      functionName: "totalSupply",
      args: [],
    });
    ```

    Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    import { BrowserProvider, Contract, parseEther } from "ethers";
    import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/vue";

    const { walletProvider } = useAppKitProvider("eip155");
    const { address } = useAppKitAccount();

    if (!walletProvider) throw Error("No provider found");
    if (!address) throw Error("No address found");

    function sendTransaction() {
      const tx = {
        from: address,
        to: "0x...", // any address
        value: parseEther("0.0001"),
      };
      const ethersProvider = new BrowserProvider(walletProvider);
      const signer = await ethersProvider.getSigner();
      const tx = await signer.sendTransaction(tx);
      console.log("transaction:", tx);
    }
    ```
  </Tab>
</Tabs>