Vue

The @myrasec/eu-captcha-vue package supplies the EuCaptcha component for Vue 3 and Nuxt.

Requirements

The following requirements are met:

Requirement	Value
Vue	Version 3, also as the basis of Nuxt
Sitekey	Public sitekey from the Details view
Server side	Endpoint that verifies the token

Install the package

Install the package:

npm i @myrasec/eu-captcha-vue

Embed the component

Embed the component in the form to protect:

<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>

Note

You can test the embedding with an invented sitekey. For an unknown sitekey, the CAPTCHA operates with the default values and lets each visitor pass. But the verification with the /verify endpoint rejects the token of an unknown sitekey with the invalid-input-sitekey error code.

Properties

These properties are available:

Property	Type	Default	Effect
sitekey	string	—	Public sitekey. The value is necessary.
theme	string	"light"	Appearance, values "light" and "dark".
width	number	330	Width of the widget in pixels.
height	number	100	Height of the widget in pixels.
widgetId	string	—	Your own identifier of the widget. Without a value, the package makes an identifier. For euCaptcha.execute(), the value is necessary.
autostart	boolean	true	Starts the challenge when the component is mounted. The false value delays the start until the euCaptcha.execute(widgetId) call.
onComplete	(token: string) => void	—	Is called with the token as soon as the challenge passed.
onExpired	() => void	—	Is called when the token expires. A token expires 60 minutes after the solution.
onError	() => void	—	Is called when a network error or a server error occurs.
scriptSrc	string	"https://cdn.eu-captcha.eu/verify.js"	Address from which the package loads the verify.js script, for example for a test or staging environment. Only messages from the origin of this address are trusted. The first load sets the address; a different address later has no effect.

Examples of the appearance:

<EuCaptcha :sitekey="captchaSitekey" theme="dark" />
<EuCaptcha :sitekey="captchaSitekey" :width="280" />
<EuCaptcha :sitekey="captchaSitekey" :height="60" />

Use the callbacks

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

Delay the start of the challenge

Set autostart to false and give an identifier:

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

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

Get the condition

Before the transmission, examine if the challenge passed:

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

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

As an alternative, wait for the euCaptchaCompleted message at the window:

import { onMounted, onUnmounted } from "vue";

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

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

Attention

The verification in the browser controls only the operation. Always also verify the token on the server. See Verify a client token.

Full example

See Vue and Python.