Simple component to integrate Invisible Recaptcha

Downloads in past


0.2.16 years ago7 years agoMinified + gzip package size for vue-invisible-recaptcha in KB


vue-invisible-recaptcha NPM version Snippets Stats
Super easy Invisible Recaptcha integration with VueJS

Library is kind of unstable. Bugs, missing features might be present


- Good customizability - Automatically loads Google's scripts on-demand and only once - Automatic reset after callback execution - it just works lol


npm i vue-invisible-recaptcha --save


Include the component,
import InvisibleRecaptcha from 'vue-invisible-recaptcha';

Then, register the component, however you like:
    components: {
        "invisible-recaptcha": InvisibleRecaptcha

And then.. use the component:
<invisible-recaptcha sitekey="..." :validate="prepare" :callback="doSomething"
    class="btn btn-danger" type="submit" id="do-something-btn" :disabled="loading">
    Do something!

Here's a detailed spec of every properties it accepts: (looks nicer on GitHub than NPM)
Prop name      =>    Description                         =>   Example

sitekey        =>    Client-side key from Google         =>   "some-fancy-id"
badge          =>    Badge location                      =>   "bottomright"
validate       =>    Func. executed before reCAPTCHA     =>   () => {this.loading = true}
                                                         =>   If this returns *exactly* false reCAPTCHA won't run
callback       =>    Func. executed after verification   =>   (recaptchaToken) => {console.log(recaptchaToken)}
disabled       =>    Whether the button is disabled      =>   true or false
id             =>    ID for the button                   =>   "do-something-btn"
type           =>    Button type (HTML5 prop)            =>   "submit"

There's a slot inside the button so you insert text or whatever. And yeah that's it, if there's something missing in the docs just look at the code, it's easy to understand.
If you find any bug, please report it as soon as possible. Contributions and pull requests are also highly appreciated as long as the code looks very clean, not over-complicated, and consistent.