Installation

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

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 and obtain a new project ID.

Don't have a project ID?

Head over to Reown Dashboard and create a new project.

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

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

AppKit

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

ConnectButton.vue

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

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.