@nuxtjs/recaptcha调用报错$recaptcha未定义如何解决

解决步骤 #

• 第一步检查nuxt.config.js配置：确认@nuxtjs/recaptcha已经添加到modules数组中，不要放在buildModules里，配置示例：

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/recaptcha',
  ],
  recaptcha: {
    version: '3',
    hideBadge: false,
    size: 'normal',
    siteKey: '你的实际siteKey'
  },
}

• 第二步修正this指向问题：你当前的onSubmit用了箭头函数，箭头函数没有独立的this上下文，无法指向Vue实例，自然获取不到挂载在实例上的$recaptcha，改成普通函数写法即可：

// 选项式API写法修正
onSubmit: async function () {
  try {
    // v2版本用这个写法
    const token = await this.$recaptcha.getResponse();
    console.log('Token:', token);
    this.$recaptcha.reset();
    // 如果是v3版本，要改成execute方法传action参数，示例：
    // const token = await this.$recaptcha.execute('submit_contact')
  } catch (error) {
    console.error(error);
  }
}

• 如果你用的是Nuxt3+组合式API，不能通过this调用，需要用内置的composable获取实例：

import { useRecaptcha } from '#recaptcha'

const { getResponse, reset, execute } = useRecaptcha()

const onSubmit = async () => {
  try {
    // v2版本
    const token = await getResponse()
    console.log('Token:', token)
    reset()
    // v3版本
    // const token = await execute('submit_contact')
  } catch (error) {
    console.error(error)
  }
}

• 另外注意版本适配：你配置里指定了version为3，就不能用v2的getResponse方法调用，要换成对应版本的调用逻辑，v3不需要手动reset，每次execute都会生成新的token。

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