excelwebzone / EWZRecaptchaBundle

This bundle provides easy reCAPTCHA form field for Symfony.
MIT License
396 stars 160 forks source link

VueJS template version #211

Open soullivaneuh opened 6 years ago

soullivaneuh commented 6 years ago

The classic Javascript template does not work correctly with VueJS because of the script presence on the template.

Maybe a vue option could be implemented here? https://www.npmjs.com/package/vue-recaptcha

Basically, it would resume to put a vue-recaptcha tag with the correct information. The Vue part should be the responsibility of the developer IMO.

soullivaneuh commented 6 years ago

I did an easy workaround for interested people. First, override the widget template like this:

{% block ewz_recaptcha_widget %}
{% spaceless %}
    {% if form.vars.ewz_recaptcha_enabled %}
        <vue-recaptcha sitekey="{{ form.vars.public_key }}"></vue-recaptcha>
    {% endif %}
{% endspaceless %}
{% endblock ewz_recaptcha_widget %}

Then don't forget to import the google API on a script tag, outside your app element:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit&hl={{ app.request.locale }}" async defer></script>

It works for me. The only issue is: The error when you don't click on the robot message disappear, like the page is reloaded. Still investigating the issue.