@myrasec/eu-captcha-vue

This package provides an easy integration of EU CAPTCHA from Myra Security for Vue 3 and Nuxt.

For full documentation see docs.eu-captcha.eu.

You can sign up for free to get a sitekey.

Installation

npm i @myrasec/eu-captcha-vue

Basic usage

<script setup lang="ts">
import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha-vue";

const captchaSitekey = "EUCAPTCHA_SITE_KEY";

function handleSubmit(): void {
  if (!isEuCaptchaDone()) {
    // challenge not yet complete
    return;
  }
  // proceed with form submission
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <!-- your fields -->
    <EuCaptcha :sitekey="captchaSitekey" />
    <button type="submit">Submit</button>
  </form>
</template>

You can test the integration using any fake sitekey. If a sitekey does not exist, the captcha runs with default parameters which allow traffic to pass.

Props

Dark theme

<EuCaptcha :sitekey="captchaSitekey" theme="dark" />

Custom width

<EuCaptcha :sitekey="captchaSitekey" :width="280" />

Custom height

<EuCaptcha :sitekey="captchaSitekey" :height="60" />

Deferred execution

Set :autostart="false" and provide a widgetId, then trigger the challenge manually:

<EuCaptcha
  :sitekey="captchaSitekey"
  widget-id="my-captcha"
  :autostart="false"
/>

<button @click="euCaptcha.execute('my-captcha')">Verify</button>

Callbacks

<EuCaptcha
  :sitekey="captchaSitekey"
  :on-complete="(token) => console.log('token:', token)"
  :on-expired="() => console.log('token expired')"
  :on-error="() => console.log('challenge error')"
/>

Querying state

Before submitting a form to a server, ensure EU CAPTCHA is done:

import { isEuCaptchaDone } from "@myrasec/eu-captcha-vue";

function handleSubmit(): void {
    if (!isEuCaptchaDone()) {
        // challenge not yet complete
        return;
    }
    // proceed with form submission
}

Listening to state change

Listen for the euCaptchaDone window message to be notified when the challenge completes:

import { onMounted, onUnmounted } from "vue";

function listenForCaptchaDone(msg: MessageEvent): void {
    if (msg.data.type === "euCaptchaDone") {
        // enable submit button, update reactive state, etc.
    }
}

onMounted(() => window.addEventListener("message", listenForCaptchaDone, false));
onUnmounted(() => window.removeEventListener("message", listenForCaptchaDone, false));