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 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:

  <vue-hcaptcha sitekey="sitekey here"></vue-hcaptcha>

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 



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

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.


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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…