Open lperez22 opened 2 years ago
ty man u saved my time♥
Hi, I did as above for nuxt 3 . but I get this error do you know why is that?
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');
}
}
I've tried that , but it didn't work again . and the same error is shown
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')
}
Hi, I did as above for nuxt 3 . but I get this error do you know why is that?
I have same problem
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:
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
For some reason, the same code didn't work in composable, but worked in component. no idea, but thanks for all the answers
Where We can find the reCAPTCHA V3 is working well?
Thanks
Where We can find the reCAPTCHA V3 is working well?
Thanks
Same Here
Maybe this article could help us --> https://dev.to/elquimeras/integrate-recaptcha-v3-on-nuxt3-app-1gma
If someone have same issue:
it's client only plugin
` import { useReCaptcha, VueReCaptcha } from 'vue-recaptcha-v3'
export default defineNuxtPlugin((nuxtApp) => { const siteKey = useRuntimeConfig().public.recaptcha;
nuxtApp.vueApp.use(VueReCaptcha, { siteKey, loaderOptions: { autoHideBadge: true, } });
const recaptchaInstance = useReCaptcha();
return { provide: { captcha: recaptchaInstance, }, }; }); `
composable
` export const useRecaptchaToken = async (action: string) => { if (!action) return
const { recaptchaLoaded, executeRecaptcha } = useNuxtApp().$captcha
await recaptchaLoaded(); return executeRecaptcha(action); } `
Hey I couldn't find a discussion section in this repo but wanted to place this here in case someone that is using Nuxt 3 needed to make use of this package. I have a stackblitz link of me using the vue-recaptcha-v3 package with both the composition api and a composable which I prefer since I needed to use the same functionality in a few components: https://stackblitz.com/edit/nuxt-starter-qmmsxd
In case the link is no longer working here is the composable and using it in a template
Vue Template:
Composable:
If you only need this in one component and don't need a composable you can setup a component like this