This package provides an easy integration of Myra Security's EU Captcha for vuejs 3.

Get your sitekey on EU-Captcha.eu.

Installation

(0) npm i @myrasec/eu-captcha-vue

(1) In your code add:

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

// use the public sitekey you find in the customer's backend here.
const captchaSitekey = "YOUR-SITEKEY-HERE";

(2) And then render the widget using the following syntax:

<EuCaptcha sitekey={captchaSitekey} />

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

Querying state

Before submitting a form to a server, please ensure that EuCaptcha is done.

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

function onSubmit(e) {
    e.preventDefault();

    if (!isEuCaptchaDone()) {
        // computation has not been completed

        return;
    }
}

Listening to state change

Additionally, a message will be posted to the main window with msg.data.type set to 'euCaptchaDone', in case you want to be informed actively to change e.g. the state of a button.

function listenForCaptchaDone(msg: MessageEvent) {
    if (msg.data.type === 'euCaptchaDone') {
        // change the state of the form, etc.
    }
}

window.addEventListener("message", listenForCaptchaDone, false);