Vue 2+Nuxt环境下vue-recaptcha-v3配置失败求助

问题概述 #

已完成vue-recaptcha-v3@^1.9.0安装，在nuxt.config.js中直接注册插件后，组件内调用this.$recaptchaLoaded()始终处于pending状态，$recaptcha等相关对象均为undefined，无法实现隐形验证码（v3）及「我不是机器人」显式验证码（v2）的调用。

核心问题排查 #

• Nuxt插件注册方式错误：直接在nuxt.config.js中执行Vue.use()不符合Nuxt的插件加载机制，第三方浏览器端插件需封装为独立插件文件并指定客户端加载。
• reCAPTCHA脚本未正确注入：vue-recaptcha-v3依赖Google官方脚本，Nuxt SSR环境下需明确禁用SSR加载才能确保脚本在浏览器端正常注入。
• 验证码类型与密钥不匹配：隐形验证码对应reCAPTCHA v3密钥，「我不是机器人」复选框对应reCAPTCHA v2密钥，二者不可混用。

解决方案 #

一、修正vue-recaptcha-v3（v3隐形验证码）的Nuxt配置 #

1. 创建专用插件文件
   在项目plugins目录下新建vue-recaptcha-v3.js：

import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, {
  siteKey: '你的reCAPTCHA v3站点密钥',
  loaderOptions: {
    hl: 'zh-CN' // 可选：设置验证码语言
  }
})

2. 在nuxt.config.js中注册插件
   确保指定客户端加载（ssr: false）：

export default {
  plugins: [
    { src: '~/plugins/vue-recaptcha-v3.js', ssr: false }
  ]
}

3. 组件内调用隐形验证码

<template>
  <button @click="handleAction">执行操作</button>
</template>

<script>
export default {
  methods: {
    async handleAction() {
      try {
        await this.$recaptchaLoaded()
        const token = await this.$recaptcha('自定义操作标识，如login/submit')
        console.log('v3验证Token:', token)
        // 将token传给后端完成验证逻辑
      } catch (err) {
        console.error('验证码加载/调用失败:', err)
      }
    }
  }
}
</script>

二、实现「我不是机器人」显式验证码（v2） #

由于vue-recaptcha-v3仅支持v3，需额外使用vue-recaptcha包实现v2复选框：

1. 安装依赖

npm install vue-recaptcha@^1.3.0

2. 创建v2插件文件
   在plugins目录下新建vue-recaptcha-v2.js：

import Vue from 'vue'
import VueRecaptcha from 'vue-recaptcha'

Vue.component('vue-recaptcha', VueRecaptcha)

3. 更新nuxt.config.js插件配置

export default {
  plugins: [
    { src: '~/plugins/vue-recaptcha-v3.js', ssr: false },
    { src: '~/plugins/vue-recaptcha-v2.js', ssr: false }
  ]
}

4. 组件内使用v2验证码

<template>
  <div>
    <vue-recaptcha
      ref="recaptcha"
      sitekey="你的reCAPTCHA v2站点密钥"
      @verify="onVerify"
      @expired="onExpired"
    ></vue-recaptcha>
    <button @click="submitForm" :disabled="!recaptchaToken">提交表单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recaptchaToken: ''
    }
  },
  methods: {
    onVerify(token) {
      this.recaptchaToken = token
      console.log('v2验证Token:', token)
    },
    onExpired() {
      this.recaptchaToken = ''
      this.$refs.recaptcha.reset() // 重置验证码
    },
    submitForm() {
      // 携带recaptchaToken提交表单到后端
    }
  }
}
</script>

关键注意事项 #

• 确保在Google reCAPTCHA控制台创建对应类型的密钥，并将开发/生产域名加入允许列表（本地开发需添加localhost）
• 所有验证码相关插件必须设置ssr: false，避免SSR环境下加载浏览器端脚本导致错误
• v3和v2的密钥不可混用，需分别创建并配置

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