Vue.js hCaptcha Component Library

hCaptcha Component Library for Vue.js, compatible with Vue 2+.

Installation

You can install this library via npm with:

npm install @hcaptcha/vue-hcaptcha --save

or by including the library in a script tag

<script src="../vue-hcaptcha.js"></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 include and load the hCaptcha API library and append it to the root component. This is designed for ease of use with the hCaptcha API!

Note: There’s a known flaw when there are multiple captchas being rendered. It’s recommended to use only one captcha per page.

Api

Props

Name	Values/Type	Required	Description
`sitekey`	String	Yes	This is your sitekey, this allows you to load captcha. If you need a sitekey, please visit hCaptcha, and sign up to get your sitekey.
`size`	String (normal, compact, invisible)	No, default: normal	This specifies the “size” of the component. hCaptcha allows you to decide how big the component will appear on render, this always defaults to normal.
`theme`: String (light, dark)	No, default: light	hCaptcha supports both a light and dark theme. If no theme is inherently set, the captcha will always default to light.
`tabindex`	Integer	No, default: 0	Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.

Events

@verify="onVerify"
@expired="onExpired"
@error="onError" (The captcha will automatically reset on error)

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.

Demo

To run the demo, simply npm run serve after downloading the repo, this will start a development server on localhost:8080. Open your console to see the demo app emitting events.

To test locally, you can run the following NPM commands:

npm run serve
- This initiates the hot reload dev server from the vue-cli
npm run build
- This will build your version of the component with your customizations for production.
npm run lint and npm run lint:fix
- This will enable ESLint to help keep your code clean!

TypeScript

Please see the DefinitelyTyped entry.

Note for maintainers: Publishing npm package

Using the proper credentials (granted to @Hcaptcha org), you’ll need to do the following to publish:

Vue.js hCaptcha Component Library