hCaptcha Component Library for Vue.js

by Vue.js Examples

Vue.js hCaptcha Component Library

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

View Documentation View Github

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?

Sign up at hCaptcha to get your sitekey today.

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:

  • npm login
  • Bump version in package.json
  • Commit changes
  • npm publish .

GitHub