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: bun@1.0.6
• 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)