Skip to main content

Vue

Use the official Vue component to protect a Vue form.

Install​

For Vue 3:

npm install @hcaptcha/vue3-hcaptcha

For Vue 2, use @hcaptcha/vue-hcaptcha and register the component in your component's components option.

Add the widget​

Copy your public sitekey from Sites. The component loads the SDK and adds h-captcha-response to the form.

<script setup>
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
</script>

<template>
  <form method="POST" action="/login">
    <input type="email" name="email" required />
    <input type="password" name="password" required />
    <VueHcaptcha sitekey="YOUR_SITE_KEY" />
    <button type="submit">Log in</button>
  </form>
</template>

For asynchronous submissions, capture the token with @verify and clear it on @expired and @error. Call the component's reset() method through a template ref after each submission attempt to obtain a fresh token.

Verify and test​

Keep your secret on your backend and verify the token before processing the login. See the Node.js example.

Use test keys to check successful and rejected submissions. Follow the local development instructions when running locally.