v3
The Google reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site.
Demo
Provider Setup
All reCAPTCHA functionality requires wrapping your application with the GoogleReCaptchaProvider. This provider manages the reCAPTCHA script loading and provides context to child components.
<template>
<GoogleReCaptchaProvider type="v3" siteKey="your_site_key">
<slot />
</GoogleReCaptchaProvider>
</template>
<script setup>
import { GoogleReCaptchaProvider } from '@google-recaptcha/vue';
</script><script setup>
import { useGoogleReCaptchaProvider } from '@google-recaptcha/vue';
useGoogleReCaptchaProvider({
type: 'v3',
siteKey: 'your_site_key'
});
</script><script setup>
import { createApp } from 'vue';
import { googleReCaptcha } from '@google-recaptcha/vue';
const app = createApp(App);
app.use(googleReCaptcha, {
type: 'v3',
siteKey: 'your_site_key'
});
</script>Usage
Google ReCaptcha v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site.
Using Composable
<template>
<button @click="onVerify">verify</button>
</template>
<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue';
const googleReCaptcha = useGoogleReCaptcha();
const onVerify = async () => {
if (!googleReCaptcha.executeV3) {
console.log('Execute recaptcha not available');
return;
}
const token = await googleReCaptcha.executeV3('action');
};
</script>Using v3 Component
The package provides a dedicated component for v3 reCAPTCHA:
<script setup>
import { GoogleReCaptchaV3 } from "@google-recaptcha/vue";
const onVerify = (token) => {
...
};
</script>
<template>
<GoogleReCaptchaV3 action="custom_action" @verify="onVerify" />
</template>Enterprise Mode
Google reCAPTCHA Enterprise provides enhanced security features, advanced analytics, and better customization options for businesses. It offers improved bot detection, detailed risk analysis, and enterprise-grade support.
<template>
<GoogleReCaptchaProvider type="v3" siteKey="your_enterprise_site_key" isEnterprise>
<slot />
</GoogleReCaptchaProvider>
</template>
<script setup>
import { GoogleReCaptchaProvider } from '@google-recaptcha/vue';
</script><script setup>
import { useGoogleReCaptchaProvider } from '@google-recaptcha/vue';
useGoogleReCaptchaProvider({
type: 'v3',
siteKey: 'your_enterprise_site_key',
isEnterprise: true
});
</script><script setup>
import { createApp } from 'vue';
import { googleReCaptcha } from '@google-recaptcha/vue';
const app = createApp(App);
app.use(googleReCaptcha, {
type: 'v3',
siteKey: 'your_enterprise_site_key',
isEnterprise: true
});
</script>After enabling enterprise mode, you can use the executeV3 function to set some actions for better risk assessment.
<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue';
const googleReCaptcha = useGoogleReCaptcha();
const onVerify = async () => {
if (!googleReCaptcha.executeV3) {
console.log('Execute recaptcha not available');
return;
}
const token = await googleReCaptcha.executeV3('action');
};
</script>
<template>
<button @click="onVerify">verify</button>
</template>Last updated on