Easy hCaptcha Integration Component – vue-hcaptcha

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:

Easy hCaptcha Integration Component - vue-hcaptcha

Download Details:

Author: hCaptcha

Live Demo: https://github.com/hCaptcha/vue-hcaptcha

Download Link: https://github.com/hCaptcha/vue-hcaptcha/archive/master.zip

Official Website: https://github.com/hCaptcha/vue-hcaptcha

Install & Download:

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

You Might Be Interested In:

Tags:

Add Comment