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

# 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, Bitcoin and TON.
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

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

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

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

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

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

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

## Cloud Configuration

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

<Card title="Don't have a project ID?" icon="circle-info" href="https://dashboard.reown.com/?utm_source=cloud_banner&utm_medium=docs&utm_campaign=backlinks">
  Head over to Reown Dashboard and create a new project.
</Card>

## 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">
    <Warning>
      MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on [WalletGuide](https://walletguide.walletconnect.network/).
    </Warning>

    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>

  <Tab title="TON">
    AppKit TON provides a set of Vue components and composables to easily connect TON 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 { TonAdapter } from '@reown/appkit-adapter-ton'
    import { ton, tonTestnet } from '@reown/appkit/networks'

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

    const networks = [ton, tonTestnet]

    const tonAdapter = new TonAdapter({
      projectId
    })

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

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

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

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

## Trigger the modal

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

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

    <CodeGroup>
      ```vue ConnectButton.vue theme={null}
      <template>
        <client-only>
          <appkit-button />
        </client-only>
      </template>
      ```

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

      const { open } = useAppKit()
      </script>

      <template>
        <client-only>
          <button @click="open()">Open Connect Modal</button>
          <button @click="open({ view: 'Networks' })">Open Network Modal</button>
        </client-only>
      </template>
      ```
    </CodeGroup>

    <Note>
      The `<client-only>` wrapper ensures AppKit components only render on the client side, preventing SSR hydration issues.
    </Note>
  </Tab>

  <Tab title="AppKit Core">
    To open AppKit Core you need to call the `connect` function from the Universal Connector.

    ```vue theme={null}
    <script setup lang="ts">
    import { ref } from 'vue'

    let session = ref(null)

    async function handleConnect() {
      // universalConnector is the universal connector instance from the implementation section
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      session.value = providerSession
    }

    async function handleDisconnect() {
      if (!universalConnector) {
        return
      }
      await universalConnector.disconnect()
      session.value = null
    }
    </script>

    <template>
      <client-only>
        <div>
          <button @click="handleConnect">Open AppKit Core</button>
          <button @click="handleDisconnect">Disconnect</button>
        </div>
      </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>

## AppKit Skills

AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration.

To install AppKit Skills, run the following command in your terminal:

```bash theme={null}
npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'
```

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.