Vue应用集成vue-recaptcha报错：useRecaptcha()未找到provider

报错Uncaught Error: useRecaptcha() is called without provider的核心原因是：你已经在main.js中全局注册了VueRecaptchaPlugin，但又在App.vue中手动调用了useRecaptchaProvider()，这会导致Recaptcha的上下文冲突——全局插件已经自动注入了provider，无需重复手动初始化。

另外你的Contact.vue还存在两处基础问题：

• 未定义name、email变量，导致v-model绑定失效
• 未实现submitForm方法

1. 修改App.vue #

移除多余的useRecaptchaProvider()调用，依赖全局插件自动完成provider注入：

<script setup>
import Contact from "./layouts/Contact.vue";
// 移除以下两行冗余代码
// import { useRecaptchaProvider } from "vue-recaptcha";
// useRecaptchaProvider();
</script>

<template>
  <Contact />
</template>

2. 修改Contact.vue #

补充变量定义和提交方法，同时优化组件导入方式（适配Vue3推荐的<script setup>语法）：

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" />

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" />

    <Checkbox />

    <button type="submit" @click.prevent="submitForm">Submit</button>
  </form>
</template>

<script setup>
import { Checkbox } from "vue-recaptcha";
import { ref } from "vue";

// 定义v-model绑定的响应式变量
const name = ref('');
const email = ref('');

// 实现表单提交方法
const submitForm = () => {
  // 后续可在此添加Recaptcha验证逻辑
  console.log('表单提交', name.value, email.value);
};
</script>

3. 验证全局配置 #

确保main.js中的v2SiteKey正确，并且你的网站域名已添加到Google Recaptcha后台的允许域名列表中。

如果不需要全局注册插件，而是想在局部组件中单独使用Recaptcha，才需要调用useRecaptchaProvider()并传入siteKey参数，示例：

useRecaptchaProvider({ v2SiteKey: "你的siteKey" });

但你已选择全局注册方案，因此无需此步骤。

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