vue-recaptcha

Google ReCAPTCHA component for vue.

Install

NPM

$ npm install --save vue-recaptcha

CDN

<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>

Usage

Get started

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>

Bind Challenge to Button

<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

API

Props

  • 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

Methods

  • reset
    Reset reCAPTCHA instance
  • execute
    Invoke reCAPTCHA challenge

Events

  • 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

GitHub