is this compatible with nuxt v3 ?

[morteza-mortezai]

hi can we use this module with nuxt version 3 ?

[mvrlin]

hi

can we use this module with nuxt version 3 ?

Hey! Unfortunately not:(

[mohammedmoutawakkil]

hi can we use this module with nuxt version 3 ?

hi can we use this module with nuxt version 3 ?

Hey! Unfortunately not:(

you can use vue-recaptcha and create a global compenent using nuxt 3 plugins it works for me

[waleedtariq109]

hi can we use this module with nuxt version 3 ?

You can create Nuxt Plugin but first install vue-recaptcha package/lib

npm i --save vue-recaptcha

If this gave an error try to install with try to add --force flag

npm i --save vue-recaptcha --force

In plugins directory create file recaptcha.ts

Paste this code in recaptcha.ts

import {defineNuxtPlugin} from "#app";
import {VueRecaptcha} from "vue-recaptcha";

export default defineNuxtPlugin((nuxtApp)=> {
    nuxtApp.vueApp.component('VueRecaptcha', VueRecaptcha)
})

Inside your component

<template>
   ...
   <VueRecaptcha
       sitekey="YOUR_SITE_KEY"
       :loadRecaptchaScript="true"
       @verify="verifyRecaptcha"
       @expired="expiredRecaptcha"
   />
   ...
</template>

Here's the complete docs

[edwinsenjaya]

hi @WaleedTariq109 thanks for the code, can you show me the verifyRecaptcha function? how do you get the API response from Google? Did you have CORS problem? is this for recaptcha v2 or v3?

also @mohammedmoutawakkil can you share your code? that'd be great and help me a lot

thanks before guys

[dan-bowen]

I found this issue while Googling this problem. There are several attempts floating around to get reCaptcha working with Nuxt 3. This is the one I ended up using.

https://github.com/AurityLab/vue-recaptcha-v3/issues/609

You can see my implementation of that library in this pull request.

https://github.com/dan-bowen/nuxt-blog-starter/pull/8

That being said... I hope the community will be able to rally around an updated reCaptcha plugin now that Nuxt 3 is stable.

[mvrlin]

I found this issue while Googling this problem. There are several attempts floating around to get reCaptcha working with Nuxt 3. This is the one I ended up using.

https://github.com/AurityLab/vue-recaptcha-v3/issues/609

You can see my implementation of that library in this pull request.

https://github.com/dan-bowen/nuxt-blog-starter/pull/8

That being said... I hope the community will be able to rally around an updated reCaptcha plugin now that Nuxt 3 is stable.

I am working on that 😉

[felixrydberg]

Hello, is this still in the works?

[DanSnow]

Hi, I'm the author of vue-recaptcha. vue-recaptcha v3 is in alpha and has natively Nuxt integration. I hope could get some feedback.

[ohkeenan]

hi can we use this module with nuxt version 3 ?

You can create Nuxt Plugin but first install vue-recaptcha package/lib

npm i --save vue-recaptcha

If this gave an error try to install with try to add --force flag

npm i --save vue-recaptcha --force

In plugins directory create file recaptcha.ts

Paste this code in recaptcha.ts

import {defineNuxtPlugin} from "#app";
import {VueRecaptcha} from "vue-recaptcha";

export default defineNuxtPlugin((nuxtApp)=> {
    nuxtApp.vueApp.component('VueRecaptcha', VueRecaptcha)
})

Inside your component

<template>
   ...
   <VueRecaptcha
       sitekey="YOUR_SITE_KEY"
       :loadRecaptchaScript="true"
       @verify="verifyRecaptcha"
       @expired="expiredRecaptcha"
   />
   ...
</template>

Here's the complete docs

Hey @waleedtariq109 thank you! I wasn't using reCaptcha but was trying to get hCaptcha to work, and your code helped me understand the component registration part of the plugin was the missing link.

Here was my code for vue-hCaptcha in case it helps anyone else:

In your vue file

<vue-hcaptcha
sitekey="xxxx" 
></vue-hcaptcha>

Then in plugins\vue-hcaptcha.js:

import { defineNuxtPlugin } from "#app";
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('vue-hcaptcha', VueHcaptcha)
})

[fahmifitu]

Check out this comment