Using with Nuxt3 - Githubissues

lperez22 commented 2 years ago

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:

<template>
  <div>Token: {{ token }} <br /></div>
</template>
<script>
export default {
  setup() {
    const token = ref('');
    return { token };
  },
  async mounted() {
    this.token = await useVueRecaptcha();
  },
};
</script>

Composable:

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

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

If you only need this in one component and don't need a composable you can setup a component like this

<template>
  <div>Component Token: {{ componentToken }}</div>
</template>
<script>
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3';
export default {
  setup() {
    const { vueApp } = useNuxtApp();
    const componentToken = ref('');
    vueApp.use(VueReCaptcha, {
      siteKey: '',
      loaderOptions: {
        autoHideBadge: true,
      },
    });
    return { componentToken };
  },
  async mounted() {
    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
    await recaptchaLoaded();
    this.componentToken = await executeRecaptcha('login');
  },
};
</script>

ezioadf2 commented 2 years ago

ty man u saved my time♥

morteza-mortezai commented 1 year ago

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

lperez22 commented 1 year ago

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

morteza-mortezai commented 1 year ago

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

KareemDa commented 1 year ago

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 commented 1 year ago

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

I have same problem

duongxinh2003 commented 1 year ago

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:

saturniesm commented 1 year ago

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: Screen Shot 2023-03-02 at 6 51 24 PM

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