When use useRecaptchaProvider it throw warning

[websitevirtuoso]

Description

I am using vue composition API in setup.

I am using next code

import { useRecaptchaProvider, useChallengeV3 } from 'vue-recaptcha'

useRecaptchaProvider()

... rest of code

But when I open different pages with recaptcha. the same page multiple time it throw warning
useRecaptchaProvider is used multiple time

Minimal Reproducible Example

To make it work I just had to check code and add condition to include provider only once

like this

import { useRecaptchaProvider, useChallengeV3, useRecaptchaContext } from 'vue-recaptcha'
if (!ctx.scriptInjected) {
  useRecaptchaProvider()
}

Maybe we have to remove line 8 on screenhot. BUt this question to owner of this lib

System info

---

• Operating System: Linux
• Node Version: v20.2.0
• Nuxt Version: -
• CLI Version: 3.9.1
• Nitro Version: -
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

[ikuosaito1989]

Hi @websitevirtuoso

This one is not a bug: useRecaptchaProvider only needs to be called once. The following example defines useRecaptchaProvider in the entry point app.vue

https://dansnow.github.io/vue-recaptcha/guide#provide-recaptcha-script

[awdr74100]

Hi, is there any way to load useRecaptchaProvider only when navigating to a certain page and avoid multiple loads (lighthouse effect issue)

[Shadercloud]

How do unmount useRecaptchaProvider(). If you want recaptcha only on certain pages. It seems once you use useRecaptchaProvider() within a component it is then mount across the whole app, and cannot be removed.

[ikuosaito1989]

Hi, is there any way to load useRecaptchaProvider only when navigating to a certain page and avoid multiple loads (lighthouse effect issue)

@awdr74100
How about trying the following code?

import { useRecaptchaProvider, useRecaptchaContext } from 'vue-recaptcha'
const ctx = useRecaptchaContext()
if (!ctx.scriptInjected) {
  useRecaptchaProvider()
}