Google ReCAPTCHA component for Vue.js
Clone or download


Greenkeeper badge devDependencies Status peerDependencies Status CircleCI npm version npm downloads

Buy Me A Coffee


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.



$ npm install --save vue-recaptcha


<script src=""></script>
<!-- Minify -->
<script src=""></script>


Get started

Place this in head to load reCAPTCHA:

<script src="" async defer>
With `onload` callback, it will notify us when the api is ready for use.

Then include vue-recaptcha in your app.

  <vue-recaptcha sitekey="Your key here"></vue-recaptcha>

  import VueRecaptcha from 'vue-recaptcha';
  export default {
    components: { VueRecaptcha }

Bind Challenge to Button

  <vue-recaptcha sitekey="Your key here">
    <button>Click me</button>

  import VueRecaptcha from 'vue-recaptcha';
  export default {
    components: { VueRecaptcha }

Notice: You could only place one element as vue-recaptcha child.

For more information, please reference to example



  • 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

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 response is the successful reCAPTCHA response
  • expired() Emit on reCAPTCHA expired
  • render(id) Emit on reCAPTCHA mounted on DOM id is the widget id of the component


What is "ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded"?

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.

How to test vue-recaptcha?

You can mock window.grecaptcha to bypass google's recaptcha. Here is an example which work with jest.

How about an e2e testing (or integration testing)?

Please refernece to recaptcha's faq.