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

npm install @finpo/vue2-recaptcha-invisible --save

yarn

yarn add @finpo/vue2-recaptcha-invisible

how to use

with webpack

<template>
<section>
  <g-recaptcha 
    data-sitekey="6LdTpxUUAAAAAG6L89kxRvjMdP0XDAyUji8rtQxw" 
    :data-validate="validate"
    :data-callback="callback"
  >Submit form
  </g-recaptcha>
  <!-- g-recaptcha will replace a button for submit form -->
</section>
</template>
<script>
import gRecaptcha from '@finpo/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>

with web

mount dist/vue2-recaptcha-invisible.min.js will install componet to vue global.

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
data-btn-class	String,Array,Object	bind class on button
data-btn-disabled	Boolean	bind disabled prop on button
data-language	String	reCAPTCHA language auto detect by defualt Language codes

online demo

demo

refactor to rollup

support sfc, esm, umd, unpkg format. vue-sfc-rollup