Vue.js hCaptcha Component Library is an easy-to-use captcha integration component to protect your application from spambots.
hcaptcha api, hcaptcha example, hcaptcha github, hcaptcha download, 2captcha hcaptcha, hcaptcha vs recaptcha, hcaptchareact
How to make use of it:
Install and download:
# NPM $ npm i @hcaptcha/vue-hcaptcha --save
1. Import and register the component.
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
export default {
...
components: { VueHcaptcha }
...
};2. Add the component to the application form and enter your site key as follows:
<template> <vue-hcaptcha sitekey="sitekey here"></vue-hcaptcha> </template>
3. Configure the hcaptcha component with the following properties.
// sitekey
sitekey: {
type: String,
required: true
},
// dark or light
theme: {
type: String
},
// normal, compact, or invisible
size: {
type: String
},
// tabindex
tabindex: {
type: String
}JS API
Props
| Name | Values/Type | Required | Default | Description |
|---|---|---|---|---|
sitekey | String | Yes | - | Your site key. Please visit hcaptcha and sign up to get a site key. |
size | String (normal, compact, invisible) | No | normal | This specifies the “size” of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal. |
theme | String (light, dark) | No | light | hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light. |
tabindex | Integer | No | 0 | Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive. |
language | String (ISO 639-2 code) | No | auto | hCaptcha auto-detects language via the user’s browser. This overrides that to set a default UI language. |
reCaptchaCompat | Boolean | No | true | Disable drop-in replacement for reCAPTCHA false to prevent hCaptcha from injecting into window.grecaptcha. |
challengeContainer | String | No | - | A custom element ID to render the hCaptcha challenge. |
rqdata | String | No | – | See Enterprise docs. |
sentry | Boolean | No | – | See Enterprise docs. |
apiEndpoint | String | No | – | See Enterprise docs. |
endpoint | String | No | – | See Enterprise docs. |
reportapi | String | No | – | See Enterprise docs. |
assethost | String | No | – | See Enterprise docs. |
imghost | String | No | – | See Enterprise docs. |
Callback Events
| Event | Params | Description |
|---|---|---|
error | err | When an error occurs. The component will reset immediately after an error. |
verify | token, eKey | When a challenge is completed. The token and an eKey are passed along. |
expired | – | When the current token expires. |
challengeExpired | – | When the unfinished challenge expires. |
opened | – | When the challenge is opened. |
closed | – | When the challenge is closed. |
reset | – | When the challenge is reset. |
rendered | – | When the challenge is rendered. |
executed | – | When the challenge is executed. |
Methods
| Method | Description |
|---|---|
execute() | Programmatically trigger a challenge request |
reset() | Reset the current challenge |
Easy hCaptcha Integration Component, Vue.js hCaptcha Component Library Plugin/Github
See Demo And Download
Official Website(hCaptcha): Click Here
This superior jQuery/javascript plugin is developed by hCaptcha. For extra advanced usage, please go to the official website.
