@google-recaptcha/vue

Vue Google reCAPTCHA

Google reCAPTCHA is a powerful library that provides easy integration of Google reCAPTCHA into your Vue applications. Built with TypeScript-first approach, SSR compatibility, and tree-shaking optimization - everything you need to protect your forms and applications from spam and abuse.

Supported reCAPTCHA Versions

• V3 - Invisible protection that returns a risk score (0.0-1.0) for each request
• V2 Invisible - Background analysis without user interaction
• V2 Checkbox - Interactive "I'm not a robot" checkbox with optional challenges
• Enterprise mode - support enterprise

Documentation

Visit https://siberiacancode.github.io/google-recaptcha/docs/vue to view the full documentation.

Getting Started

npm install @google-recaptcha/vue

Basic Setup

<template>
  <GoogleReCaptchaProvider type="v3" site-key="your_site_key">
    <App />
  </GoogleReCaptchaProvider>
</template>

<script setup lang="ts">
import { GoogleReCaptchaProvider } from "@google-recaptcha/vue";
import App from "./App.vue";
</script>

Using reCAPTCHA in Components

<template>
  <form @submit="onSubmit">
    ...
    <button type="submit">Submit</button>
  </form>
</template>

<script setup lang="ts">
import { useGoogleReCaptcha } from "@google-recaptcha/vue";

const googleReCaptcha = useGoogleReCaptcha();

const onSubmit = async (event: Event) => {
  event.preventDefault();

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