Package Exports

@finpo/vue2-recaptcha-invisible

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@finpo/vue2-recaptcha-invisible) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue2-recaptcha-invisible

vue.js 2 component for google reCAPTCHA invisible

how to install

npm install @finpo/vue2-recaptcha-invisible

how to use

<template>
<section>
  <g-recaptcha 
    data-sitekey="6LdTpxUUAAAAAG6L89kxRvjMdP0XDAyUji8rtQxw" 
    :data-validate="validate"
    :data-callback="callback" >
  </g-recaptcha>
  <!-- g-recaptcha will replace a button for submit form -->
</section>
</template>
<script>
import gRecaptcha from 'vue2-recaptcha-invisible';
export default {
  components: {
    gRecaptcha,
  },
  methods: {
    validate() {
      // validate your form , if you don't have validate prop , default validate pass .
      return true;
    },
    callback(token) {
      // google recaptcha token , then you can pass to backend with your form data .
      if (token) {
        alert(token);
      }else{
        // if you use data-size show reCAPTCHA , maybe you will get empty token.
        alert('please check you are not robot');
      }
    },
  },
}
</script>

props

prop	type	desc
data-sitekey	String	your front-end api key from google
data-callback	Function	receive google reCAPTCHA response token
data-validate	Function	you can validate your form before get token ( only validate return true )
data-badge	String	bottomright(default) , bottomleft , inline
data-type	String	audio , image(default)
data-tabindex	String	0
data-size		if you want show reCAPTCHA (I'm not robot chekcbox) on screen , add this attribute

online demo

demo