Currently you are viewing v3 document of vue-recaptcha which is still in development

ChallengeV3 v3

Create reCAPTCHA v3 challenge

Code
<script lang="ts" setup>
const response = ref()
</script>

<template>
  <div>
    <ChallengeV3 v-model="response" action="submit">
      <PrimaryButton>{{ response ? `Get response: ${response.slice(0, 6)}...` : 'click me' }}</PrimaryButton>
    </ChallengeV3>
  </div>
</template>

Props

keytypedefaultdescription
actionstringThe action for reCAPTCHA v3
asstring'div'What element to render
autoExecutebooleantrueShould 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

keytypedescription
modelValuestringThe reCAPTCHA response

Slots

default

This is the position that usually place a your submit button. When click on the content, ChallengeV3 will automatically execute the reCAPTCHA challenge by default

Slot API

interface SlotApi {
  /**
   * reCAPTCHA v3 response
   */
  response: string | undefined
  /**
   * execute reCAPTCHA v3 challenge
   */
  execute: () => Promise<string>
}
Table of Contents