Nuxt3中无需createApp()，如何实现use-wagmi插件的配置？

一、纯Vue环境下的插件注册问题 #

在Vue 3中，app.use()是应用实例专属方法，必须依赖createApp()创建的应用实例才能完成插件注册，不存在可以跳过导入根组件（如./app.vue）和createApp()的全局Vue函数来实现相同效果。

插件的注册逻辑是绑定到具体的Vue应用实例上的，Vue 3已经废弃了Vue 2中Vue.use()的全局插件注册方式，必须通过应用实例调用use()方法才能完成插件的初始化与配置注入。

二、Nuxt 3中use-wagmi的解决方案 #

针对你遇到的报错（需结合UseWagmiPlugin使用useConfig）、导入wagmi导致应用崩溃的问题，以下是适配Nuxt 3的完整配置步骤：

1. 清理依赖并安装正确包 #

首先卸载React生态的wagmi（这是导致Nuxt崩溃的原因），仅保留专为Vue/Nuxt打造的use-wagmi及依赖viem：

npm uninstall wagmi
npm install use-wagmi viem
# 或使用pnpm/yarn
pnpm add use-wagmi viem

2. 创建客户端专属插件 #

在Nuxt 3中，钱包相关逻辑必须限制在客户端执行（避免SSR环境报错），因此创建plugins/wagmi.client.ts文件（文件名后缀.client.ts表示仅在客户端加载）：

import { UseWagmiPlugin, createConfig, sepolia } from 'use-wagmi'
import { createPublicClient, http } from 'viem'

export default defineNuxtPlugin((nuxtApp) => {
  // 创建wagmi配置
  const config = createConfig({
    autoConnect: true,
    publicClient: createPublicClient({
      chain: sepolia,
      transport: http(),
      // 若需WebSocket传输，替换为webSocket（注意仅客户端可用）
      // transport: webSocket('wss://sepolia.infura.io/ws/v3/你的Infura密钥')
    }),
  })

  // 通过Nuxt应用实例注册插件
  nuxtApp.vueApp.use(UseWagmiPlugin, config)
})

3. 组件中正确使用use-wagmi #

在Vue组件中使用use-wagmi的组合式函数时，需确保代码仅在客户端执行，可通过process.client判断或包裹在客户端生命周期钩子中：

<script setup>
import { useAccount, useConnect, injected } from 'use-wagmi'

// 仅在客户端初始化钱包相关逻辑
let address = ref('')
let isConnected = ref(false)
let connect = () => {}

if (process.client) {
  const account = useAccount()
  const connectFn = useConnect({ connector: injected() })
  
  address = account.address
  isConnected = account.isConnected
  connect = connectFn.connect
}
</script>

<template>
  <!-- 仅在客户端渲染钱包交互元素 -->
  <div v-if="process.client">
    <button v-if="!isConnected" @click="connect">连接钱包</button>
    <p v-else>已连接地址: {{ address }}</p>
  </div>
</template>

4. 排查SSR相关问题 #

若仍遇到WebSocket或SSR报错，需注意：

• WebSocket传输仅在客户端可用，不要在SSR阶段初始化WebSocket连接
• 避免在useServerInit或服务端渲染的生命周期钩子中调用钱包相关API
• 可使用Nuxt的useClientOnly组件包裹钱包交互区域，确保仅客户端渲染

内容的提问来源于stack exchange，提问作者Meltxx