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
| Variables | Type | Description |
|---|---|---|
| recaptchaIsLoaded | ref | Returns whether the recaptcha script has loaded. |
| hasRecaptcha | computed | Returns whether the site key has been loaded |
| loadRecaptcha | function | Loads the recaptcha script, will be skipped if site key is null OR is already loaded |
| getToken | async function | Returns either a string if site key is set, or undefined if site key is null
|