Cannot destructure property 'executeRecaptcha'

[gplusdotgr]

I'm using the plugin in a Vue component but inside an Astro app. Not sure if that plays a role. Here's what I'm getting as an error:

<script setup lang="ts">

import { VueReCaptcha, useReCaptcha } from "vue-recaptcha-v3"
const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

const recaptcha = async () => {
  // (optional) Wait until recaptcha has been loaded.
  await recaptchaLoaded()

  // Execute reCAPTCHA with action "login".
  const token = await executeRecaptcha("login")

  console.log("token", token)
}

</script>

12:25:26 [ERROR] Cannot destructure property 'executeRecaptcha' of '__vite_ssr_import_9__.useReCaptcha(...)' as it is undefined.

[dayhi]

同样的问题，你的解决了吗

[Akulko]

same issue

[mcorraodab]

Just installed the library, same issue here.

I believe the problem is that executing useReCaptcha() returns "undefined"

[zapaza]

same issue

[xfudox]

Same issue here, can confirm what @mcorraodab said, useRecaptcha() returns a null, so docs for vue3 composition api are wrong.

Anyone solved this?

[cedroux]

Solution :

import { useReCaptcha } from 'vue-recaptcha-v3';

const reCaptcha = useReCaptcha();

const login = async () => {
  await reCaptcha.recaptchaLoaded();

  const token = await reCaptcha.executeRecaptcha('login');

  console.log('token', token);
}