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.

Note

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

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:

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.

Warning

AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x 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#

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

Note

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

Note

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

Note

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

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.

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

Note

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

  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#

  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  }

Note

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

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

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>

Note

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#

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

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:

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.

Nuxt#

Installation#

Cloud Configuration#

Implementation#

Bitcoin Provider Interface#

Parameters#

Responses#

Trigger the modal#

Blockchain Interaction#

AppKit Skills#