Easy hCaptcha Integration Component – vue-hcaptcha

Install & Download:

# NPM
$ npm i @hcaptcha/vue-hcaptcha --save

Description:

A simple-to-use Vue.js hCaptcha integration component to protect your app against spambots.

How to use it:

1. Import and register the component.

import VueHcaptcha from '@hcaptcha/vue-hcaptcha';

export default {
  ...
  components: { VueHcaptcha }
  ...
};

2. Get your sitekey on the hcaptcha.com

3. Add the component to the app template and insert your own sitekey as follows:

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

4. Config the hcaptcha component with the following props.

// sitekey
sitekey: {
  type: String,
  required: true
},
// dark or light
theme: {
  type: String
},
// normal, compact, or invisible
size: {
  type: String
},
// tabindex
tabindex: {
  type: String 
}

5. Event handlers.

• @verify=”onVerify”: fired when verified
• @expired=”onExpired”: fired when expired
• @error=”onError”: fired on error

Preview:

Changelog:

07/29/2023

• feat: support custom prop

10/19/2021

• Add vue3 support

v0.3.0alpha (01/23/2021)

• Extend hcaptcha props, add examples and ts types

v0.3.0alpha (01/23/2021)

• Extend hcaptcha props, add examples and ts types

v0.2.3 (09/28/2020)

• Update