question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

I use this package : https://www.npmjs.com/package/vue-recaptcha-v3. It get from this github

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

enter image description here

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?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
nateilercommented, Apr 19, 2021

For what it’s worth, this is my implementation via Vue 3 to show/hide the badge on a specific page

import { Vue , Ref } from 'vue';

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

const RECAPTCHA_SITE_KEY = 'RECAPTCHA_KEY';

// Route names where we 'show' the badge
const RECAPTCHA_ROUTE_NAMES = ['register'];

const app = Vue.createApp({});

app.use(VueReCaptcha, { siteKey: RECAPTCHA_SITE_KEY, autoHideBadge: true });

const recaptchaLoaded = app.config.globalProperties
  .$recaptchaLoaded as () => Promise<boolean>;

void recaptchaLoaded().then(() => {
  const instance = app.config.globalProperties
    .$recaptchaInstance as Ref<ReCaptchaInstance>;

  function toggleReCaptcha(routeName: string) {
    RECAPTCHA_ROUTE_NAMES.includes(routeName)
      ? instance.value.showBadge()
      : instance.value.hideBadge();
  }

  toggleReCaptcha(<string>(router.currentRoute.value.name || ''));

  router.beforeEach((to, _from, next) => {
    toggleReCaptcha(<string>(to.name || ''));
    next();
  });
});

1reaction
WipeAircommented, Nov 30, 2019

Hey, I’ve just published v1.7.2 which exposes ReCacaptchaInstance. You can now call this.$recaptchInstance.hideBadge() to hide and this.$recaptchInstance.showBadge() to show the ReCaptcha badge.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I display the captcha icon only on certain pages (VUE ...
in main.js set autoHideBadge true: import { VueReCaptcha } from 'vue-recaptcha-v3' ...
Read more >
How do I display the captcha icon only on certain pages (VUE ...
I use this package : https://www.npmjs.com/package/vue-recaptcha-v3. It get from this github I add on my main.js : import { VueReCaptcha } ...
Read more >
How do I display the captcha icon only on certain pages (VUE ...
in main.js set autoHideBadge true: import { VueReCaptcha } from 'vue-recaptcha-v3' Vue.use(VueReCaptcha, { siteKey: 'your site key', ...
Read more >
Invisible reCAPTCHA - Google Developers
This page explains how to enable and customize the invisible reCAPTCHA on your webpage. To invoke the invisible reCAPTCHA, you can either:.
Read more >
Hide the reCaptcha v3 badge the right way - BRIZZO
Using Google's reCaptcha v3 script displays a sticky logo at the bottom ... the entire page/site is “protected by Google” but it is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found