How do I display the captcha icon only on certain pages (VUE reCAPTCHA-v3)?

Question

I use this package : https://www.npmjs.com/package/vue-recaptcha-v3

I add on my main.js :

import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, { siteKey: 'xxxxxxx' })

I add this code :

await this.$recaptcha('login').then((token) => {
    recaptcha = token
})

to my component to get token from google recapchta

My problem is the captcha icon in the lower right corner appears on all pages

I want it to only appear in certain components

Maybe I must to change this : Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' }). Seems it still mounting to Vue.use. I want to mount to a certain component instead of vue root instance

How can I solve this problem?

Update

I try like this :

Vue.use(VueReCaptcha, {
  siteKey: 'xxxxxxx',
  loaderOptions: {
    useRecaptchaNet: true,
    autoHideBadge: true
  }
})

It hides the badge. I want the badge to still appear. But only on 1 page, the registration page. How can I do it?

Answer 1

I've had the same issue while using the npm package, it's pretty annoying.

At the end of the day, I've decided not to use the package & follow Google's documentation.

This line here :

grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'login'}).then(function(token) {
  recaptcha = token
})

Is equivalent to this line here from the npm package :

this.$recaptcha('login').then((token) => {
   recaptcha = token 
})

You just need to add this line into your < head > for recaptcha to work :

<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>

But as soon the script tag is in your < head >, you will be facing the same issue of it showing on every page.

The hack is that you only insert it into the < head > on components that you need. There are ways to do this but I ended up referencing this.

You can put it in the methods of your component & call the method when the component is loaded.

That way it will only show up on the pages that you need it to.

Answer 2

in main.js set autoHideBadge true:

import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'your site key', 
  loaderOptions:{autoHideBadge: true }})

in every page you want to show the badge you can show the badge in mounted, for some reasons until a few seconds after mounted event this.$recaptchaInstance is null and you cant use it, so I use a timeout to showing the badge 5 second after page load in mounted.

mounted(){
    setTimeout(()=>{
      const recaptcha = this.$recaptchaInstance
      recaptcha.showBadge()
    },5000)
   },

when you show it you have to hide it again in the same page.

   beforeDestroy() {
    const recaptcha = this.$recaptchaInstance
      recaptcha.hideBadge()
    },

Answer 3

If you are using composition API setup this is what you need:

const reCaptchaIn = useReCaptcha().instance
onMounted(() => {
    setTimeout(() => {
    reCaptchaIn.value.showBadge()
}, 3000)

})