Vue

The Vue package provides a comprehensive solution for integrating Google reCAPTCHA into Vue applications. Built specifically for Vue 3, it offers composables, components, and providers that seamlessly integrate with the Vue Composition API while supporting all reCAPTCHA versions including v3, v2-invisible, and v2-checkbox.

Installation

Install the Vue package using your preferred package manager:

npm install @google-recaptcha/vue

pnpm add @google-recaptcha/vue

yarn add @google-recaptcha/vue

bun add @google-recaptcha/vue

Provider Setup

Vue reCAPTCHA can be integrated in three different ways depending on your needs and application structure: Plugin, Provider Component, Composable

import { createApp } from 'vue';
import { googleReCaptcha } from '@google-recaptcha/vue';

import App from './App.vue';

const app = createApp(App);

app.use(googleReCaptcha, {
  type: 'v3',
  siteKey: 'your_site_key'
});
app.mount('#app');

<template>
  <GoogleReCaptchaProvider type="v3" site-key="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>

Usage Examples

V3

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.

<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>

<script setup>
import { GoogleReCaptchaV3 } from '@google-recaptcha/vue';

const token = ref('');
</script>

<template>
  <GoogleReCaptchaV3 v-model="token">
    <button>Verify</button>
  </GoogleReCaptchaV3>
</template>

V2 invisible

Google ReCaptcha v2 invisible does not require users to solve any puzzles or enter any codes. Instead, it runs in the background and analyzes user behavior on the web page to determine if they are genuine users or potential bots.

<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue';

const googleReCaptcha = useGoogleReCaptcha();

const onVerify = async () => {
  if (!googleReCaptcha.executeV2Invisible) {
    console.log('Execute recaptcha not available');
    return;
  }

  const token = await googleReCaptcha.executeV2Invisible();
  ...
};
</script>

<template>
  <button @click="onVerify">Verify</button>
</template>

V2 checkbox

When a user interacts with the Google ReCaptcha v2 checkbox, advanced algorithms analyze their behavior to distinguish between humans and bots. If the system suspects suspicious activity, additional challenges may be presented, such as image selections or puzzle-solving tasks.

<script setup>
import { GoogleReCaptchaCheckbox } from '@google-recaptcha/vue';

const onChange = (token) => console.log(token);
</script>

<template>
  <GoogleReCaptchaCheckbox @change="onChange" />
</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.

<script setup>
import { GoogleReCaptchaProvider } from '@google-recaptcha/vue';
</script>

<template>
  <GoogleReCaptchaProvider type="v3" site-key="your_enterprise_site_key" is-enterprise>
    ...
  </GoogleReCaptchaProvider>
</template>

Enterprise mode supports some actions for better risk assessment and provides detailed analytics on user interactions.

<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue';

const googleReCaptcha = useGoogleReCaptcha();

  const onClick = async () => {
    const token = await googleReCaptcha.executeV3('action');
    ...
  };
</script>