Prerequisites
First, you should get your Captcha ID and Captcha Div ID
Please visit for more information: Displaying Lemin CAPTCHA
Installation
Install captcha wrapper with npm:
npm i @leminnow/vue-lemin-cropped-captcha
Also, you can install captcha wrapper with yarn:
yarn add @leminnow/vue-lemin-cropped-captcha
Integration
Use LeminCroppedCaptcha component in your View:
Lemin Captcha must be placed inside of a “form” element.
<template>
<div>
<form>
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="...">
</LeminCroppedCaptcha>
</form>
</div>
</template>
This component prepares the lemin captcha and marks where the captcha will appear if necessary.
Please ensure that your captcha-div-id is the same as the captcha-div-id you've set before. If you set a captcha-div-id for your Lemin Captcha in the advanced settings, this div must have that same captcha-div-id. (default: "lemin-cropped-captcha")
Usage Examples
Automatically bind the challenge to a button
Please ensure you set the ID field of your form submit element to "leminSubmitButton".
If this method is not suitable for you, consider using the programmatically invoke the challenge method.
<template>
<form @submit.prevent="onSubmit">
<LeminCroppedCaptcha
:ref="captchaRef"
:captcha-id="captchaId"
:container-id="containerId"
:src="captchaSrc"
>
</LeminCroppedCaptcha>
<button class="btn btn-primary" id="leminSubmitButton">Submit</button>
</form>
</template>
<script setup lang="ts">
import {
leminCroppedCaptcha,
LeminCroppedCaptcha,
} from "@leminnow/vue-lemin-cropped-captcha";
import { ref } from "vue";
const captchaRef = ref();
const captchaId = "..."; // your captcha div id
const containerId = "CROPPED_..."; // your captcha id
function onSubmit() {
const captchaValues = leminCroppedCaptcha
.getCaptcha(captchaId)
.getCaptchaValue();
const isCaptchaValid = captchaValues.answer && captchaValues.challenge_id;
if (isCaptchaValid) {
//execute your method
}
}
</script>
Programmatically invoke the challenge
To use this feature, you must have version 0.2.0 or newer of the @leminnow/vue-lemin-cropped-captcha package.
If you use the programmatically invoke challenge method, please ensure that the submit button ID is NOT "leminSubmitButton".
If you wish to have more control over when the Invisible Captcha runs, you can use the execute method in leminCroppedCaptcha object.
<script>
function onYourHandler() {
const captcha = leminCroppedCaptcha.getCaptcha();
captcha.execute().then(({ answer, challenge_id }) => {
const isCaptchaValid = answer && challenge_id;
if (isCaptchaValid) {
//execute your method
}
});
}
</script>