未捕获错误:调用useRecaptcha()时没有提供程序.同时在ve3的脚本设置标签中导入复选框

Question

我想在我的投资组合网站上使用ReCAPTCHA来防止有意的电子邮件联系垃圾邮件发送到EmailJS，但是当我遵循文档时，它显示了一个错误Uncaught Error: useRecaptcha() is called without provider.

我尝试了@unhead/vue和没有@unhead/vue

using@unhead/vue

main.js

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
import { VueRecaptchaPlugin } from 'vue-recaptcha'
import './style.css'
import App from './App.vue'

const app = createApp(App)
const head = createHead()
app.use(head)
app.use(VueRecaptchaPlugin, {
v2SiteKey: import.meta.env.VITE_RECAPTCHA_SITE_KEY,
})
app.mount('#app')

App.vue

<script setup>
import Navbar from './components/Navbar.vue'
import Projects from './components/Projects.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue';
import { useRecaptchaProvider } from 'vue-recaptcha'
useRecaptchaProvider()
</script>
<template>
<Navbar/>
<div id="about">
<About/>
</div>
<div id="work-experience">
Work Experience
</div>
<div id="projects">
<Projects/>
</div>
<div id="contact">
<Contact/>
</div>
</template>
...

Contact.vue

<script setup>
import { Checkbox } from 'vue-recaptcha';
</script>
<template>
<div class="container">
<div class="contact">
<h2>Reach me</h2>
<div class="social">
</div>
</div>
<form ref="form" @submit.prevent="sendEmail">
<div class="form">
<input type="text" name="from_name" placeholder="Name">
<input type="email" name="from_email" placeholder="Email">
<input type="text" name="company_name" placeholder="Company">
<textarea name="message" placeholder="Message"></textarea>
<Checkbox/>
<button type="submit">Send</button>
</div>
</form>
</div>
</template>

警告

[Vue warn]: injection "Symbol(vue-recaptcha-context)" not found. 
at <Checkbox> 
at <Contact> 
at <App>

[Vue warn]: [vue-recaptcha]: You may forget to `use` vue-recaptcha plugin 
at <Checkbox> 
at <Contact> 
at <App>

[Vue warn]: Unhandled error during execution of setup function 
at <Checkbox> 
at <Contact> 
at <App>

误差

Uncaught Error: useRecaptcha() is called without provider.
at useRecaptchaContext (context.mjs?v=40414563:8:11)
at useAssertV2SiteKey (context.mjs?v=40414563:17:15)
at useChallengeV2 (challenge-v2.mjs?v=40414563:12:19)
at useComponentV2 (component-v2.mjs?v=40414563:5:83)
at setup (Checkbox.vue:46:18)
at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7265:29)
at setupComponent (runtime-core.esm-bundler.js:7220:11)
at mountComponent (runtime-core.esm-bundler.js:5542:13)
at processComponent (runtime-core.esm-bundler.js:5517:17)

不使用@unhead/vue是相同的使用，但不创建头部和更改导入作为vue-recaptcha/head此外，我得到相同的警告和错误使用@unhead/vue

Answer 1

我也遇到了同样的问题。我查看了json包，我有3.0.0 alpha版本。我认为他们在你可以安装的版本上做错了。如果你有同样的问题，请尝试卸载alpha版本并安装"2.0.3"版本。希望能有所帮助。

Answer 2

我在使用vue-recaptcha包版本3.0.0-alpha时遇到了这个问题。2、更新到3.0.0-alpha。6 .

更新包中的版本号。然后运行NPM install