useChallengeV2 v2
Description
A composable to help you mount the reCAPTCHA checkbox or invisible reCAPTCHA
Input
interface RecaptchaV2CheckboxOptionsInput {
theme?: 'dark' | 'light'
size?: 'compact' | 'normal'
tabindex?: string
}
interface RecaptchaV2InvisibleOptionsInput {
badge?: 'bottomright' | 'bottomleft' | 'inline'
size: 'invisible'
tabindex?: string
}
export interface UseChallengeV2Input {
/**
* root to mount reCAPTCHA
*/
root?: MaybeComputedRef<Element | undefined>
/**
* Option that pass to reCAPTCHA render
*/
options?: RecaptchaV2OptionsInput
}
Return
export interface UseChallengeV2Return {
/**
* root element ref to mount reCAPTCHA
*/
root: Ref<Element | undefined>
/**
* reCAPTCHA widget id
*/
widgetID: Ref<WidgetID | undefined>
/**
* state of reCAPTCHA
*/
state: Ref<RecaptchaV2State>
/**
* the verified event
*/
onVerify: EventHookOn<string>
/**
* the expired event
*/
onExpired: EventHookOn<void>
/**
* the error event
*/
onError: EventHookOn<Error>
/**
* execute the challenge
*/
execute: () => void
/**
* reset reCAPTCHA
*/
reset: () => void
}
About the state please see here for more details
Please see reCAPTCHA docs for more information about the options.
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
Examples
Checkbox
<script>
import { useChallengeV2 } from 'vue-recaptcha'
const { root, onVerify } = useChallengeV2({
options: {
theme: 'light',
size: 'normal',
}
})
onVerify((response) => {
// do something with response
console.log(response)
})
</script>
<template>
<div ref="root" />
</template>
Invisible reCAPTCHA
<script>
import { useChallengeV2 } from 'vue-recaptcha'
const { root, execute, onVerify } = useChallengeV2({
options: {
// It's important to pass `size: 'invisible'` to render a invisible reCAPTCHA
size: 'invisible',
}
})
onVerify((response) => {
// do something with response
console.log(response)
})
</script>
<template>
<div>
<button @click="execute">
submit
</button>
<!-- You must give an empty div to render the invisible reCAPTCHA -->
<div ref="root" />
</div>
</template>