vue-invisible-recaptcha
v0.2.1
Published
Simple component to integrate Invisible Recaptcha
Downloads
1,445
Maintainers
Readme
vue-invisible-recaptcha
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.