Nuxt

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana, Bitcoin and TON. Choose one of these to get started.

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

Installation

Wagmi
Ethers
Solana
Bitcoin
TON

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @wagmi/vue @tanstack/vue-query

npm install @reown/appkit @reown/appkit-adapter-ethers ethers

npm install @reown/appkit @reown/appkit-adapter-solana

npm install @reown/appkit @reown/appkit-adapter-bitcoin

npm install @reown/appkit @reown/appkit-adapter-ton

Cloud Configuration

Create a new project on Reown Dashboard and obtain a new project ID.

Don't have a project ID?

Head over to Reown Dashboard and create a new project.

Implementation

Wagmi
Ethers
Solana
Bitcoin
TON

Nuxt Wagmi Example

Check the Nuxt Wagmi example

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:

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:

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

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

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

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

Make sure to set your NUXT_PROJECT_ID environment variable which you can get from Reown Dashboard.

The ssr: false configuration and <client-only> wrapper ensure AppKit works correctly with Nuxt’s SSR environment.

In your Nuxt application, set up the following configuration for Ethers integration.First, configure your nuxt.config.ts for SSR compatibility:

export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    public: {
      projectId: process.env.NUXT_PROJECT_ID
    }
  }
})

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

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

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.

The ssr: false configuration and <client-only> wrapper ensure AppKit works correctly with Nuxt’s SSR environment.

In your Nuxt application, set up the following configuration for Solana integration.First, configure your nuxt.config.ts for SSR compatibility:

export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    public: {
      projectId: process.env.NUXT_PROJECT_ID
    }
  }
})

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

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

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.

The ssr: false configuration and <client-only> wrapper ensure AppKit works correctly with Nuxt’s SSR environment.

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:

export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    public: {
      projectId: process.env.NUXT_PROJECT_ID
    }
  }
})

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

<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

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

SignMessageParams
SendTransferParams
SignPSBTParams

  export type SignMessageParams = {
    /**
     * The message to be signed
     */
    message: string
    /**
     * The address to sign the message with
     */
    address: string
  }

  export type SendTransferParams = {
    /**
     * The amount to be sent in satoshis
     */
    amount: string
    /**
     * The address to send the transfer to
     */
    recipient: string
  }

  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

}

Responses

AccountAddress
SignPSBTResponse

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

  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
  }

The ssr: false configuration and <client-only> wrapper ensure AppKit works correctly with Nuxt’s SSR environment.

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:

export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
    public: {
      projectId: process.env.NUXT_PROJECT_ID
    }
  }
})

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

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

The ssr: false configuration and <client-only> wrapper ensure AppKit works correctly with Nuxt’s SSR environment.

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

AppKit
AppKit Core

To open AppKit you can use our web components or build your own button with AppKit composables.

<template>
  <client-only>
    <appkit-button />
  </client-only>
</template>

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

To open AppKit Core you need to call the connect function from the Universal Connector.

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

Blockchain Interaction

Wagmi
Ethers

You need to install @wagmi/core to interact with smart contracts:

npm install @wagmi/core

Wagmi actions can help us interact with wallets and smart contracts:For this use case, we need to import the wagmiConfig from our AppKit WagmiAdapter configuration.

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.

Ethers can help us interact with wallets and smart contracts:

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

Fundamentals

Authentication

Transactions

Installation

Nuxt

Installation

Cloud Configuration

Don't have a project ID?

Implementation

Nuxt Wagmi Example

Bitcoin Provider Interface

Parameters

Responses

Blockchain Interaction

Fundamentals

Authentication

Transactions

​Nuxt

​Installation

​Cloud Configuration

Don't have a project ID?

​Implementation

Nuxt Wagmi Example

​Bitcoin Provider Interface

​Parameters

​Responses

​Trigger the modal

​Blockchain Interaction

Nuxt

Installation

Cloud Configuration

Implementation

Bitcoin Provider Interface

Parameters

Responses

Trigger the modal

Blockchain Interaction