useAccRecaptcha

Client-side composable for executing Google reCAPTCHA v3 and retrieving a token for a given action.

Overview

useAccRecaptcha executes a Google reCAPTCHA v3 challenge and returns a token for a given action. When making API requests, the $accApi plugin calls this composable automatically — just pass captchaAction in the request body and it will be swapped for a resolved captchaToken before the request is sent.

Use useAccRecaptcha directly only if you cannot use useAccApi or the $accApi plugin.

Setup

Add your reCAPTCHA site key to your environment. Accelerator reads RECAPTCHA_SITE_KEY by default — no extra config needed if you use that variable name.

# .env
RECAPTCHA_SITE_KEY=your-site-key-here

If you want to use a different variable name, set it explicitly in your nuxt.config.ts:

// nuxt.config.ts
levarneAcc: {
  recaptcha: {
    siteKey: process.env.YOUR_CUSTOM_VAR,
  },
}

Usage

const { executeRecaptcha } = useAccRecaptcha()

// Returns { token: string }
const { token } = await executeRecaptcha('your_action_name')

Returns

executeRecaptcha(action):Promise<{ token: string }>

Executes reCAPTCHA v3 for the given action name and returns the resolved token.

Errors

RecaptchaClientOnly:Error

Thrown when called on the server. reCAPTCHA is client-side only.

RecaptchaSiteKeyMissing:Error

Thrown (and renders Nuxt error page) when RECAPTCHA_SITE_KEY is not configured.

RecaptchaUnavailable:Error