albertcht / invisible-recaptcha

An invisible reCAPTCHA package for Laravel, Lumen, CI or native PHP.
MIT License
603 stars 162 forks source link

INVISIBLE_RECAPTCHA_BADGEHIDE=true squaks a bit with Vue #107

Closed DeBelserArne closed 5 years ago

DeBelserArne commented 5 years ago

Hello there,

I have split up @captchaHTML&@captchaScripts so that Laravel + Vue doesn't throw any errors. But the problem arises again if you set INVISIBLE_RECAPTCHA_BADGEHIDE to true.

This implements the following code in the template: <style>.grecaptcha-badge{display:none;!important}</style>

Any chance we can render this out of the template (maybe with a blade directive in the header). Right now I solved this by manually putting it in my stylesheet.

This is the Vue error: - Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

albertcht commented 5 years ago

Hi @aFluxx ,

I think the best way to hide the badge in vue is to turn INVISIBLE_RECAPTCHA_BADGEHIDE off. And apply <style>.grecaptcha-badge{display:none;!important}</style> in your vue files.