Cannot use recaptcha on a specific component about vue-recaptcha-v3

[jals1212]

Use autoHideBadge in loaderOptions

loaderOptions: {
    autoHideBadge: true
}

Create a wrapper composable to use it.

// use-recaptcha.ts
import { onMounted, onUnmounted } from 'vue';
import {
  IReCaptchaComposition,
  useReCaptcha as _useReCaptcha,
} from 'vue-recaptcha-v3';

export const useReCaptcha = () => {
  const { executeRecaptcha, isLoaded, instance, recaptchaLoaded } =
    _useReCaptcha() as IReCaptchaComposition;

  onMounted(() => {
    instance.value?.showBadge();
  });

  onUnmounted(() => {
    instance.value?.hideBadge();
  });

  return {
    isLoaded,
    executeRecaptcha,
    recaptchaLoaded,
  };
};

This will toggle it when you use it in a page component.

[nekooee]

Use autoHideBadge in loaderOptions

loaderOptions: {
    autoHideBadge: true
}

Create a wrapper composable to use it.

// use-recaptcha.ts
import { onMounted, onUnmounted } from 'vue';
import {
  IReCaptchaComposition,
  useReCaptcha as _useReCaptcha,
} from 'vue-recaptcha-v3';

export const useReCaptcha = () => {
  const { executeRecaptcha, isLoaded, instance, recaptchaLoaded } =
    _useReCaptcha() as IReCaptchaComposition;

  onMounted(() => {
    instance.value?.showBadge();
  });

  onUnmounted(() => {
    instance.value?.hideBadge();
  });

  return {
    isLoaded,
    executeRecaptcha,
    recaptchaLoaded,
  };
};

This will toggle it when you use it in a page component.

But this only hides the badge and the script is loaded in the background on all pages.
I'm using Laravel combined with Vue and I only need the google recaptcha script to be loaded on one of the pages and not on all the pages.
It's strange that this component doesn't provide any solution for loading locally, and it's too bad that an extra script is loaded all over the site.

[mssayari]

Hey @cod3rshotout ,
Have you found any solution for this problem?
I only need it in my register page but when we add it in our main, it appears on all pages!