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
Please note that Lemin Captcha must be placed inside of a "form" element.
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")
Using with component ref:
<template>
<div>
<form>
<!-- Your Captcha Id and Captcha Div Id -->
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="...">
</LeminCroppedCaptcha>
</form>
<button @click="getCaptchaValue">Get Captcha Values</button>
</div>
</template>
<script>
import {LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
export default {
name: 'App',
components: {
LeminCroppedCaptcha
},
methods: {
getCaptchaValue() {
const values = this.$refs.captchaRef.getCaptchaValue();
}
}
};
</script>
Using with leminCroppedCaptcha multiple instances:
<template>
<div>
<form>
<!-- Your Captcha Id and Captcha Div Id -->
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="...">
</LeminCroppedCaptcha>
</form>
<button @click="getCaptchaValue">Get Captcha Values</button>
</div>
</template>
<script>
import {leminCroppedCaptcha, LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
export default {
name: 'App',
components: {
LeminCroppedCaptcha
},
methods: {
getCaptchaValue() {
const values = leminCroppedCaptcha.getCaptcha('CROPPED_...').getCaptchaValue()
}
}
};
</script>
Please, find below the example GitHub repository.