Using with Nuxt3 about vue-recaptcha-v3

[duongxinh2003]

I resolved this issue:
First, in template html here is my code:

<template>
<v-form @submit.prevent="submitForm">
  <v-text-field
                      class="mb-3"
                      label="Username"
                      prepend-icon="mdi-account"
                      variant="outlined"
                      v-model="username.value.value"
                      :error-messages="username.errorMessage.value"
                  ></v-text-field>
  <v-text-field
                      label="Password"
                      prepend-icon="mdi-lock"
                      variant="outlined"
                      :type="showPassword ? 'text':'password'"
                      :append-inner-icon="showPassword ? 'mdi-eye':'mdi-eye-off'"
                      @click:append-inner="showPassword =! showPassword"
                      v-model="password.value.value"
                      :error-messages="password.errorMessage.value"
                  ></v-text-field>
<v-btn
                        type="submit"
                        class="w-100 g-recaptcha"
                        data-sitekey="reCAPTCHA_site_key"
                        data-callback='onSubmit'
                        data-action='submit'
                    >
                      Login
                    </v-btn>
</v-form>
</template>

Script:

<script lang="ts" setup>
import {useField, useForm} from 'vee-validate';
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
...

const { vueApp } = useNuxtApp();
vueApp.use(VueReCaptcha, {
  siteKey: 'key-site',
  loaderOptions: {
    renderParameters: {
      hl: 'en'
    }
  }
})
const recaptchaInstance = useReCaptcha();
const submitForm = handleSubmit(async values => {
  await recaptchaInstance?.recaptchaLoaded();
  const token = await recaptchaInstance?.executeRecaptcha('submit')
  values.googleReCaptchaToken = token
  console.log('Google recaptChaToken: ', values.googleReCaptchaToken);
});

And here is my result:

[morteza-mortezai]

Hi,
I did as above for nuxt 3 .
but I get this error

do you know why is that?

[lperez22]

I have run into this issue before when trying to initialize it in a method that is asynchronous, what I ended up doing was making a composable file

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

export function useVueRecaptcha(pubicKey) {
  const { vueApp } = useNuxtApp();
  vueApp.use(VueReCaptcha, {
    siteKey: pubicKey,
    loaderOptions: { autoHideBadge: true },
  });
  const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
  return async (action) => {
    await recaptchaLoaded();
    return await executeRecaptcha(action);
  };
}

And then on mounted I call the composable and I pass in my siteKey to initialize the package and on submit I call recaptcha

  data() {
    return {
      recaptcha: null,
    }
  }
  mounted() {
    this.recaptcha = useVueRecaptcha(this.recaptchaKey);
  },
  methods: {
    async onSubmit() {
      const recaptchaToken = await this.recaptcha('login');
  }
}

[ezioadf2]

ty man u saved my time♥

[morteza-mortezai]

I've tried that , but it didn't work again .
and the same error is shown

[KareemDa]

For those who are facing the error

Hi,
I did as above for nuxt 3 .
but I get this error

do you know why is that?

Try this instead:

ort const useVueRecaptcha = async () => {
  const { vueApp } = useNuxtApp()
  vueApp.use(VueReCaptcha, {
    siteKey: '6Lc1dLcjAAAAAJv-IVAfPpKH3DG42HIOGbHapY-Y',
    loaderOptions: {
      autoHideBadge: true,
    },
  })

  const recaptchaInstance = useReCaptcha()

  await recaptchaInstance?.recaptchaLoaded()
  return await recaptchaInstance?.executeRecaptcha('login')
}

[duongxinh2003]

Hi, I did as above for nuxt 3 . but I get this error do you know why is that?

I have same problem

[saturniesm]

I resolved this issue: First, in template html here is my code:

<template>
<v-form @submit.prevent="submitForm">
  <v-text-field
                      class="mb-3"
                      label="Username"
                      prepend-icon="mdi-account"
                      variant="outlined"
                      v-model="username.value.value"
                      :error-messages="username.errorMessage.value"
                  ></v-text-field>
  <v-text-field
                      label="Password"
                      prepend-icon="mdi-lock"
                      variant="outlined"
                      :type="showPassword ? 'text':'password'"
                      :append-inner-icon="showPassword ? 'mdi-eye':'mdi-eye-off'"
                      @click:append-inner="showPassword =! showPassword"
                      v-model="password.value.value"
                      :error-messages="password.errorMessage.value"
                  ></v-text-field>
<v-btn
                        type="submit"
                        class="w-100 g-recaptcha"
                        data-sitekey="reCAPTCHA_site_key"
                        data-callback='onSubmit'
                        data-action='submit'
                    >
                      Login
                    </v-btn>
</v-form>
</template>

Script:

<script lang="ts" setup>
import {useField, useForm} from 'vee-validate';
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
...

const { vueApp } = useNuxtApp();
vueApp.use(VueReCaptcha, {
  siteKey: 'key-site',
  loaderOptions: {
    renderParameters: {
      hl: 'en'
    }
  }
})
const recaptchaInstance = useReCaptcha();
const submitForm = handleSubmit(async values => {
  await recaptchaInstance?.recaptchaLoaded();
  const token = await recaptchaInstance?.executeRecaptcha('submit')
  values.googleReCaptchaToken = token
  console.log('Google recaptChaToken: ', values.googleReCaptchaToken);
});

And here is my result:

Hello, when i tried to use the usual button component, i get this error:

even tho i already change the data-sitekey="reCAPTCHA_site_key" to my site-key. does anyone knows why i get this error? thank you

[danieldanielecki]

For some reason, the same code didn't work in composable, but worked in component. no idea, but thanks for all the answers

[hendisantika]

Where We can find the reCAPTCHA V3 is working well?

Thanks

[devkazuto]

Where We can find the reCAPTCHA V3 is working well?

Thanks

Same Here

[hendisantika]

Maybe this article could help us --> https://dev.to/elquimeras/integrate-recaptcha-v3-on-nuxt3-app-1gma