# @finpo/vue2-recaptcha-invisible

> vue.js 2 component for google recaptcha invisible

Latest version **1.2.0** (published 2018-10-03) · 0 weekly downloads

## Install

```sh
npm install @finpo/vue2-recaptcha-invisible
pnpm add @finpo/vue2-recaptcha-invisible
yarn add @finpo/vue2-recaptcha-invisible
bun add @finpo/vue2-recaptcha-invisible
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2018-10-03 |
| First published | 2017-04-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | ausir |
| Maintainers | ausir |
| Keywords | vue2, recaptcha, google recaptcha invisible, vue2-component |

## Links

- npm: https://www.npmjs.com/package/@finpo/vue2-recaptcha-invisible
- Repository: https://github.com/finpo/vue2-recaptcha-invisible
- Homepage: https://github.com/finpo/vue2-recaptcha-invisible#readme
- Issues: https://github.com/finpo/vue2-recaptcha-invisible/issues
- npm.io page: https://npm.io/package/@finpo/vue2-recaptcha-invisible

## Recent versions

- 1.2.0 (latest) — 2018-10-03
- 1.1.9 — 2018-10-03
- 1.1.8 — 2018-08-15
- 1.1.7 — 2018-08-15
- 1.1.6 — 2018-08-15
- 1.1.5 — 2018-07-16
- 1.1.4 — 2018-04-09
- 1.1.3 — 2017-07-10
- 1.1.2 — 2017-07-05
- 1.1.1 — 2017-04-09
- 1.1.0 — 2017-04-08
- 1.0.5 — 2017-04-08
- 1.0.4 — 2017-04-08
- 1.0.3 — 2017-04-08
- 1.0.2 — 2017-04-07
- … 2 more at https://npm.io/package/@finpo/vue2-recaptcha-invisible/versions

## README

# vue2-recaptcha-invisible

> vue.js 2 component for google reCAPTCHA invisible

## how to install
npm
```bash
npm install @finpo/vue2-recaptcha-invisible --save
```
yarn
```bash
yarn add @finpo/vue2-recaptcha-invisible
```

## how to use

with webpack

```vue
<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<br/>auto detect by defualt<br/>[Language codes](https://developers.google.com/recaptcha/docs/language)

## online demo
[demo](https://vue2-recaptcha-invisible.surge.sh/)

## refactor to rollup
support sfc, esm, umd, unpkg format.
[vue-sfc-rollup](https://www.npmjs.com/package/vue-sfc-rollup)

---
_Source: https://npm.io/package/@finpo/vue2-recaptcha-invisible · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._