# @mathewparet/vue-recaptcha-invisible

> A Vue.JS component for invisible recaptcha that falls back to native button if recaptcha is disabled in config, making it easy to have different settings for different environments.

Latest version **1.0.9** (published 2019-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mathewparet/vue-recaptcha-invisible
pnpm add @mathewparet/vue-recaptcha-invisible
yarn add @mathewparet/vue-recaptcha-invisible
bun add @mathewparet/vue-recaptcha-invisible
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-01-11 |
| First published | 2019-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | yes |
| Author | Mathew Paret |
| Maintainers | mathewparet |

## Links

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

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [axios](https://npm.io/package/axios.md) ^0.18
- [jquery](https://npm.io/package/jquery.md) ^3.2

## Recent versions

- 1.0.9 (latest) — 2019-01-11
- 1.0.8 — 2019-01-05

## README

# @mathewparet/vue-recaptcha-invisible

> A Vue.JS component for invisible recaptcha that falls back to native button if recaptcha is disabled in config, making it easy to have different settings for different environments.

## Installation

``` bash
# instal the module
npm install @mathewparet/vue-recaptcha-invisible
```

## Registration

```js
import Recaptcha from '@mathewparet/vue-recaptcha-invisible';
Vue.use(Recaptcha, { 
    enabled: true, 
    siteKey: '<site key from Google>'
});
```

### Configuration - ```recaptcha.config.json```

If you do not wish to pass the configuration while initializing the component - i.e, if you wish to register the component as ```Vue.use(Recaptcha)``` then you can define a JSON file of the below format and save it directly under your ```public``` directory. It must have the exact filename ```recaptcha.config.json```.

```json
{
    "siteKey": "<sitekey received from Google>",
    "enabled: true
}
```

For your convinience, a sample ```recaptcha.config.json``` file is placed in your project root (_not the ```public``` directory_) directory when you run ```npm install @mathewparet/vue-recaptcha-invisible```. You can copy this file to the ```public``` directory and modify the configuration as needed.

**Note** - *You need to add your```<public_dir>/<recaptcha-config-file>.json```* to ```.gitignore``` since this configuration should be different for each environment.

If you wish to use a custom file name for the config file, then you will need to pass the same as an option when registering the compoenent, like:

```js
import Recaptcha from '@mathewparet/vue-recaptcha-invisible';
Vue.use(Recaptcha, {
    url: '/my-custom-recaptcha-conf-file.json'
})
```

## Usage
```html
<recaptcha class-name="btn btn-primary">Submit</recaptcha> 
```

### Note
Your ```<form>``` element __MUST__ have an ```ID``` defined

### Attributes
Name | Type | Required | Description
--- | --- | --- | ---
```class-name``` | String | No | CSS Class name to be applied.

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