Property 'executeRecaptcha' does not exist on type 'IReCaptchaComposition | undefined'

[averri]

This library does not work as documented. I have followed all the instructions for configuring with Vue 3 composition API, this is what I get:

ERROR in src/components/ReCaptchaV3.vue:32:15
TS2339: Property 'executeRecaptcha' does not exist on type 'IReCaptchaComposition | undefined'.
    30 |     setup(props, { emit }) {
    31 |
  > 32 |       const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
       |               ^^^^^^^^^^^^^^^^
    33 |
    34 |       async function validate() {

ERROR in src/components/ReCaptchaV3.vue:32:33
TS2339: Property 'recaptchaLoaded' does not exist on type 'IReCaptchaComposition | undefined'.
    30 |     setup(props, { emit }) {
    31 |
  > 32 |       const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();

[cloedu87]

you're right @averri, there is a implementation and/or documentation issue... but you can use it like this:

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

export default defineComponent({
  name: 'BlaComponent',
  setup() {
    const reCaptcha = useReCaptcha();

    async function recaptcha() {
      await reCaptcha.recaptchaLoaded();

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

      return await verifyRecaptcha(token);
    }

    return {
      recaptcha,
    }

[vandelpavel]

Yeah but still remais undefined. Check #561

[jdmr]

@vandelpavel you just need to verify it's there: ` import { useReCaptcha } from 'vue-recaptcha-v3';

export default defineComponent({ name: 'BlaComponent', setup() { const reCaptcha = useReCaptcha();

async function recaptcha() {
  if (!reCaptcha) {
      return alert('could not get recaptcha');
  }
  await reCaptcha.recaptchaLoaded();

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

  return await verifyRecaptcha(token);
}

return {
  recaptcha,
}

}); `

[benschool]

For anyone looking through this using Githubissues.

Githubissues is a development platform for aggregating issues.