How to implement on VueJS


Installation

Install captcha wrapper:

npm install @leminnow/vue-lemin-cropped-captcha

 

Usage

Please note that Lemin Captcha must be placed inside of a "form" element.

Please ensure that your container-id is the same as the container-id you've set on the previous step. (default: "lemin-cropped-captcha")

Using with component ref:

<template>
<div>
<form>
<!-- Your Captcha Id and Captcha Container 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 Container 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. 

https://github.com/lemin-now/lemin_captcha_vuejs_example