Hiding captcha when navigating with useRouter

[Aspyryan]

Description

Captcha v3 popup not disappearing when navigation from page to page.

When I navigate using the router.push. The popup is still visible but not needed anymore. Can I somehow destroy the captcha?

Minimal Reproducible Example

https://stackblitz.com/edit/vue-rrrchm?file=src%2Fviews%2FLoginView.vue

System info

System:
OS: Windows 11 10.0.22631
CPU: (12) x64 AMD Ryzen 5 7600X 6-Core Processor
Memory: 15.25 GB / 31.15 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (120.0.2210.91)
Internet Explorer: 11.0.22621.1
npmPackages:
@vitejs/plugin-vue: ^4.5.2 => 4.5.2
vite: ^5.0.10 => 5.0.10
vue-recaptcha: ^3.0.0-alpha.2 => 3.0.0-alpha.2

[ricardo17coelho]

I'm also facing this issue.
@Aspyryan did u find some workaround fo this ?

@DanSnow is possible to hide/show the badge ?
Something like, when unmounted -> hide(), then mounted -> show()

[ricardo17coelho]

@DanSnow can u pls answer ?

[DanSnow]

Please check out here for how to hide it https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge

[ricardo17coelho]

@DanSnow if i set the style globally, it will hide the captcha everywhere..
I need to hide it depeding on the current route 🧐

[ricardo17coelho]

Ok.. i found an workaround.. but i think that u @DanSnow should add an switch show() / hide() to the composable.

Add global stlye:

.grecaptcha-badge {
  visibility: hidden !important;
}

.grecaptcha-badge-show {
  visibility: visible !important;
}

i have an component where i use everywhere i need the Captcha & there i have:

onMounted(() => {
  const grecaptchaBadgeEl = document.querySelector('.grecaptcha-badge');
  if (grecaptchaBadgeEl) {
    grecaptchaBadgeEl.classList.add('grecaptcha-badge-show');
  }
});

onUnmounted(() => {
  const grecaptchaBadgeEl = document.querySelector('.grecaptcha-badge');
  if (grecaptchaBadgeEl) {
    grecaptchaBadgeEl.classList.remove('grecaptcha-badge-show');
  }
});