@jdinabox/vue-3-hcaptcha NPM

Vue.js hCaptcha Component Library

hCaptcha Component Library for Vue.js. Compatible with Vue 2 & 3.

Installation

You can install this library via npm with:

npm install @hcaptcha/vue-hcaptcha --save

or via yarn:

yarn add @hcaptcha/vue-hcaptcha

or via script tag (Vue must be globally available)

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@hcaptcha/vue-hcaptcha"></script>

Basic Usage

<template>
    <vue-hcaptcha sitekey="**Your sitekey here**"></vue-hcaptcha>
</template>

<script>
  import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
  export default {
    ...
    components: { VueHcaptcha }
  };
</script>

The component will automatically load the hCaptcha API library and append it to the root component.

JS API

Props

Name	Values/Type	Required	Default	Description
`sitekey`	String	Yes	`-`	Your sitekey. Please visit hCaptcha and sign up to get a sitekey.
`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 with `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. Component will reset immediately after an error.
`verify`	`token, eKey`	When 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

FAQ

How can I get a sitekey?

What is hCaptcha?

hCaptcha is a drop-in replacement for reCAPTCHA that earns websites money and helps companies get their data labeled.

Are features like bot scores and No-CAPTCHA/passive mode also available?

Yes, in the enterprise version: see hCaptcha Enterprise (BotStop) for details.

Demo

To run the demo: 1. clone this repo git clone https://github.com/hCaptcha/vue-hcaptcha.git 2. run npm run serve

it will start the demo app on localhost:8080
open your console to see the demo app emitting events

TypeScript

TypeScript is supported (types/index.d.ts), and you can see an example by running npm run serve:ts.

Notes for developers

Scripts

npm run serve - will start the traditional demo app with hot reload
npm run serve:ts - will start the typescript demo app with hot reload
npm run test - will test the library: unit tests and types
npm run build - will build the production version
npm run lint - will check for lint issues
npm run lint:fix - will fix for lint issues

Notes for maintainers

Publishing

To publish a new version, follow the next steps: 1. Bump the version in package.json 2. Create a Github Release with version from step 1 without a prefix such as v (e.g. 1.0.3)