vue.js 2 component for google recaptcha invisible


26101.2.03 years ago4 years agoMinified + gzip package size for @finpo/vue2-recaptcha-invisible in KB



vue.js 2 component for google reCAPTCHA invisible

how to install


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


yarn add @finpo/vue2-recaptcha-invisible

how to use

with webpack

  >Submit form
  <!-- g-recaptcha will replace a button for submit form -->
import gRecaptcha from '@finpo/vue2-recaptcha-invisible';
export default {
  components: {
  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) {
        // if you use data-size show reCAPTCHA , maybe you will get empty token.
        alert('please check you are not robot');

with web

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


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


refactor to rollup

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.