How do I display the captcha icon only on certain pages (VUE reCAPTCHA-v3)?
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.
Just use this code:
const recaptcha = this.$recaptchaInstance// Hide reCAPTCHA badge:recaptcha.value.hideBadge()// Show reCAPTCHA badge:recaptcha.value.showBadge()