Notice: The document on github is always reference to master branch. For stable version, please read the document at NPM.
Google ReCAPTCHA component for vue. If you like this package, please leave a star on github.
This version is for Vue 2.0. If you need Vue 1.x support please reference to vue-v1.x.
Notice: This project currently not supporting reCAPTCHA v3.
$ npm install --save vue-recaptcha<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>
<!-- Minify -->
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>Place this in head to load reCAPTCHA:
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>With `onload` callback, it will notify us when the api is ready for use.
Then include vue-recaptcha in your app.
<template>
<vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha';
export default {
...
components: { VueRecaptcha }
};
</script><template>
<vue-recaptcha sitekey="Your key here">
<button>Click me</button>
</vue-recaptcha>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha';
export default {
...
components: { VueRecaptcha }
};
</script>Notice: You could only place one element as vue-recaptcha child.
For more information, please reference to example
If loadRecaptchaScript props is set to true, vue-recaptcha will inject the required <script> tag. This means that manually placing the <script> tag is unneccessary.
<template>
<vue-recaptcha sitekey="Your key here" :loadRecaptchaScript="true"></vue-recaptcha>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha';
export default {
...
components: { VueRecaptcha }
};
</script>- sitekey (required) ReCAPTCHA site key
- theme (optional) The color theme for reCAPTCHA
- type (optional) The type of reCAPTCHA
- size (optional) The size of reCAPTCHA
- tabindex (optional) The tabindex of reCAPTCHA
- badge (optional) (Invisible ReCAPTCHA only) Position of the reCAPTCHA badge
- loadRecaptchaScript (optional)
If
loadRecaptchaScriptis set totrue, vue-recaptcha will inject the required<script>tag Default:false
The following props will only work when loadRecaptchaScript is set as true
- recaptchaHost (optional)
Set this to change the reCAPTCHA domain if neccessary, as described in ReCAPTCHA support
Default:
www.google.com - recaptchaScriptId (optional)
Set this to change the injected
<script>id. This should only be changed if it conflicts with existing id Default:__RECAPTCHA_SCRIPT - language (optional)
Set this to change the reCAPTCHA language if necessary, as described in ReCAPTCHA support
Default: ''
// user browser language by default
Notice: It'll not work as you expecting when you change this props dynamicly. Since it's impossible to change the language without a full page reloading
For more information, please reference to ReCAPTCHA document and Invisible ReCAPTCHA document.
- reset Reset reCAPTCHA instance
- execute Invoke reCAPTCHA challenge
- verify(response)
Emit on reCAPTCHA verified
responseis the successful reCAPTCHA response - expired() Emit on reCAPTCHA expired
- render(id)
Emit on reCAPTCHA mounted on DOM
idis the widget id of the component - error() Emit when reCAPTCHA encounters an error
It's because google's recaptcha have been loaded before your app. You can simply ignore it because vue-recaptcha can still detect and render recaptcha. If you care about this, try to move the script tag of recatpcha after to your app.
You can mock window.grecaptcha to bypass google's recaptcha.
Here is an example which work with jest.
Please refernece to recaptcha's faq.