Installation

Nuxt

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana and Bitcoin. 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

npm

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

Cloud Configuration

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

Don’t have a project ID?

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

Get started

Implementation

Wagmi

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.

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:

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

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

<template>
  <client-only>
    <appkit-connect-button />
    <appkit-account-button />
    <appkit-network-button />
  </client-only>
</template>

Wagmi

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

Web Components

Web components are global html elements that don’t require importing. Make sure to wrap them in <client-only> for SSR compatibility.

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

You can also use <appkit-connect-button> and <appkit-account-button> components.

Blockchain Interaction

Wagmi

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

npm

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.