Cannot destructure property 'executeRecaptcha'

[gkatsanos]

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);
}

[jackkitley]

Get this logging in SSR for that @cedroux

injection "Symbol(VueReCaptchaInjectKey)" not found.

[ryancrumble]

Solution is based on this article

@jackkitley mentioned it is occurring in SSR. This approach utilizes the onMounted, which is only called client side.

// googleRecaptcha.composable.ts

import { type IReCaptchaComposition, useReCaptcha } from 'vue-recaptcha-v3'

export function useGoogleRecaptcha() {
  const recaptchaInstance = ref<IReCaptchaComposition | undefined>()

  onMounted(() => {
    recaptchaInstance.value = useReCaptcha()
  })

  async function executeRecaptcha(action: string) {
    if (!recaptchaInstance.value) {
      throw new Error('Recaptcha instance is not available')
    }

    await recaptchaInstance.value.recaptchaLoaded()

    return recaptchaInstance.value.executeRecaptcha(action)
  }

  return executeRecaptcha
}

// nuxtRecaptchaPlugin.client.ts

import { VueReCaptcha } from 'vue-recaptcha-v3'
import type { IReCaptchaOptions } from 'vue-recaptcha-v3/dist/IReCaptchaOptions'


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:mounted', () => {
    const options: IReCaptchaOptions = {
      siteKey: {GOOGLE_RECAPTCHA_KEY},
      loaderOptions: {
        ...
      }
    }

    nuxtApp.vueApp.use(VueReCaptcha, options)
  })
})

[nsvk13]

Solution is based on this article

@jackkitley mentioned it is occurring in SSR. This approach utilizes the onMounted, which is only called client side.

// googleRecaptcha.composable.ts

import { type IReCaptchaComposition, useReCaptcha } from 'vue-recaptcha-v3'

export function useGoogleRecaptcha() {
const recaptchaInstance = ref<IReCaptchaComposition | undefined>()

onMounted(() => {
recaptchaInstance.value = useReCaptcha()
})

async function executeRecaptcha(action: string) {
if (!recaptchaInstance.value) {
throw new Error('Recaptcha instance is not available')
}

await recaptchaInstance.value.recaptchaLoaded()

return recaptchaInstance.value.executeRecaptcha(action)

}

return executeRecaptcha
}

// nuxtRecaptchaPlugin.client.ts

import { VueReCaptcha } from 'vue-recaptcha-v3'
import type { IReCaptchaOptions } from 'vue-recaptcha-v3/dist/IReCaptchaOptions'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('app:mounted', () => {
const options: IReCaptchaOptions = {
siteKey: {GOOGLE_RECAPTCHA_KEY},
loaderOptions: {
...
}
}

nuxtApp.vueApp.use(VueReCaptcha, options)

})
})

okay, but i disabled SSR, and the error again.
is there any other way?