Vue

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

Requirements

The following requirements must be 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 all traffic goes through.

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.

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 euCaptchaDone message at the window:

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

Warning

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.