Press "Enter" to skip to content

A Simple hCaptcha Integration Component Library Using Vue.js

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

NameValues/TypeRequiredDefaultDescription
sitekeyStringYes-Your site key. Please visit hcaptcha and sign up to get a site key.
sizeString (normal, compact, invisible)NonormalThis specifies the “size” of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal.
themeString (light, dark)NolighthCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.
tabindexIntegerNo0Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.
languageString (ISO 639-2 code)NoautohCaptcha auto-detects language via the user’s browser. This overrides that to set a default UI language.
reCaptchaCompatBooleanNotrueDisable drop-in replacement for reCAPTCHA  false to prevent hCaptcha from injecting into window.grecaptcha.
challengeContainerStringNo-A custom element ID to render the hCaptcha challenge.
rqdataStringNoSee Enterprise docs.
sentryBooleanNoSee Enterprise docs.
apiEndpointStringNoSee Enterprise docs.
endpointStringNoSee Enterprise docs.
reportapiStringNoSee Enterprise docs.
assethostStringNoSee Enterprise docs.
imghostStringNoSee Enterprise docs.

Callback Events

EventParamsDescription
errorerrWhen an error occurs. The component will reset immediately after an error.
verifytoken, eKeyWhen a challenge is completed. The token and an eKey are passed along.
expiredWhen the current token expires.
challengeExpiredWhen the unfinished challenge expires.
openedWhen the challenge is opened.
closedWhen the challenge is closed.
resetWhen the challenge is reset.
renderedWhen the challenge is rendered.
executedWhen the challenge is executed.

Methods

MethodDescription
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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.