v3-recaptcha

V3 Recaptcha for Vue3

About

This package is used to incorporate Googles V3 Recaptcha into a vue project easily. It handles:

• Injecting script into head to load googles recaptcha.
• Generating a token to be verified on your server.
• Pass actions to recaptcha token generator
• Handle recaptcha loading dynamically if required.

Installation

npm install v3-recaptcha

Usage

Import the package in the component you want to use recaptcha.

import { useV3Recaptcha } from "v3-recaptcha";

Pull the required functions:

const { recaptchaIsLoaded, hasRecaptcha, loadRecaptcha, getToken } = useV3Recaptcha("YOUR SITE KEY HERE");

"YOUR SITE KEY HERE" should be replaced with your site key from google. If you are adding this into a package and allowing users choose if they want to include recaptcha, this can be replaced with null and recaptcha wont load, getToken will then return undefined instead of a token string.

Load recaptcha is typically best to add this on the onMounted hook:

onMounted(() => {
  loadRecaptcha();
});

Get a token:

const token = await getToken(`process_form`);

Functions and Variables