ChallengeV2 v2
Create invisible reCAPTCHA v2
Props
| key | type | default | description |
|---|---|---|---|
as | string | 'div' | What element to render |
badge | `'bottomright' | 'bottomleft' | 'inline'` |
autoExecute | boolean | true | Should vue-recaptcha execute challenge on click, if you set it to false you'll need to call the execute method in the slot |
v-model
| key | type | description |
|---|---|---|
modelValue | string | The reCAPTCHA response |
widgetId | string | Widget id for reCAPTCHA checkbox |
About modelValue
You can set modelValue to null or empty string to reset reCAPTCHA checkbox.
About the visible Badge for invisible reCAPTCHA
You should be able to see the reCAPTCHA badge in the bottom right corner of this page. It is a mark displayed by Google when you use invisible reCAPTCHA. You can add the following CSS code to hide it.
.grecaptcha-badge { visibility: hidden; }
Please note that, according to Google's requirements, you will need to explicitly state that you are using reCAPTCHA. For more information, you can refer to this link
Slots
default
This is the position that usually place a your submit button. When click on the content, ChallengeV2 will automatically execute the reCAPTCHA challenge by default
Slot API
interface SlotApi {
/**
* widget id
*/
widgetId: WidgetID | undefined
/**
* reCAPTCHA state
*/
state: RecaptchaV2State
isError: boolean
isExpired: boolean
isVerified: boolean
/**
* reset reCAPTCHA
*/
reset: () => void
/**
* execute challenge
*/
execute: () => void
}
RecaptchaV2State
export enum RecaptchaV2State {
Init = 'init',
Verified = 'verified',
Expired = 'expired',
Error = 'error',
}