@hcaptcha/vue-hcaptcha

Vue hCaptcha Component Library

Description

hCaptcha Component Library for Vue.js, compatible with Vue 2.0.

hCaptcha is an easy to use replacement for reCaptcha that helps monetize your website.

Sign up at hCaptcha to get your sitekey today. You need a sitekey to use this captcha solution.

Installation

You can install this library via npm with:

npm install vue-hcaptcha --save

or by including the library in a script tag

<script src="../vue-hcaptcha.js"></script>

Usage

Basic Usage

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

The two required props are the sitekey and root component. 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!

Props include:

• sitekey: String, Required
  • This is your sitekey, this allows you to load captcha.
• root: String, Required
  • This is for appending the hcaptcha script automatically
• size: String (normal, compact, invisible)
  • 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. Want a smaller checkbox? Use compact!
• theme: String (light, dark)
  • hCaptcha supports both a light and dark theme. If no theme is inherently set, the captcha will always default to light.
• tabindex: Integer
  • Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive. This always defaults to 0.

The component emits any events related to verification, and expiring. Simply catch these events in the parent component ie: @verify="onVerify", @expired="onExpired", @error=onError and handle the events as you choose. The captcha will automatically reset on error, but still emit an error.