A simple component to implement Invisible Recaptcha with no hassle
Switch branches/tags
Nothing to show
Clone or download
MicroDroid Fix ID prop being set on the div and not on the button
Signed-off-by: Yousef Sultan <yousef.su.2000@gmail.com>
Latest commit 6ebdd2f Jun 20, 2018

README.md

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

Features

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

Installation

npm i vue-invisible-recaptcha --save

Usage

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!
</invisible-recaptcha>

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.