vue-recaptcha renders a div on body every render. about vue-recaptcha

[DanSnow]

Are you using invisible recaptcha?

[helixion]

Nope, just using the "i am not a robot" solution. The way I have it setup is that if they pass the recaptcha check and fill the required fields, it will enable the submit button.

[helixion]

It seems to be something that recaptcha attaches to the dom (not the vue component itself). I haven't really got a solid clean solution to preventing it from happening, but one solution is to write a mixin that imports vue-recaptcha with the following hook:

beforeDestroy() {
  const el = document.querySelector('.g-recaptcha-bubble-arrow').parentElement;
  el.remove();
}

It's not really the "vue" way of doing things, and I'm not sure what underlining performance issues there might be with having the aforementioned div appended and removed repeatedly. Although like I mentioned I have noticed a slight performance hit while rendering the recaptcha element itself.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pakiam]

Hi, I`m using invisible recaptcha on my index page and recaptcha challenge rendering every time in DOM, then I visit it. Any help?