Registry / auth-security / vue-recaptcha-v3

vue-recaptcha-v3

library2.0.1jsnpmunverified

Vue reCAPTCHA-v3 is a library designed to simplify the integration of Google reCAPTCHA v3 into Vue.js applications. It leverages the underlying `recaptcha-v3` package to provide an easy-to-use API for executing reCAPTCHA actions and obtaining tokens. The current stable version, 2.0.1, fully supports Vue 3, with previous versions (specifically ^1.9.0) available for Vue 2 applications. The package has a moderate release cadence, with updates typically coinciding with feature additions, bug fixes, or updates to the core `recaptcha-v3` dependency. Its key differentiator is its straightforward API for both Vue 2 (options API) and Vue 3 (composition API), abstracting away the complexities of the reCAPTCHA JavaScript API, and offering optional loader configurations for advanced use cases.

auth-security web-framework

npm install vue-recaptcha-v3

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-RECAPTCHA-V3

vue-recaptcha-v3

auth-securityjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueReCaptcha

✓ import { VueReCaptcha } from 'vue-recaptcha-v3'

✗ const { VueReCaptcha } = require('vue-recaptcha-v3')

This is the primary named export for installing the plugin globally in Vue applications. CommonJS `require` is not officially supported for modern Vue 3 applications.

useReCaptcha

✓ import { useReCaptcha } from 'vue-recaptcha-v3'

✗ import { useRecaptcha } from 'vue-recaptcha-v3'

Used with Vue 3's Composition API. Note the correct capitalization: `useReCaptcha`, not `useRecaptcha` as was a typo in earlier documentation.

ComponentCustomProperties

✓ declare module '@vue/runtime-core' { interface ComponentCustomProperties { $recaptcha: (action: string) => Promise<string> } }

✗ declare module 'vue' { interface Vue { $recaptcha: (action: string) => Promise<string> } }

For TypeScript users in Vue 3 Options API, extending `ComponentCustomProperties` from `@vue/runtime-core` is necessary for type inference of instance properties like `$recaptcha` and `$recaptchaLoaded`.

This quickstart demonstrates how to initialize the `vue-recaptcha-v3` plugin for Vue 3 using the Composition API, execute a reCAPTCHA action, and retrieve the token. It includes an optional environment variable for the site key and shows basic console logging of the token.

import { createApp } from 'vue' import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3' const VUE_APP_RECAPTCHA_SITE_KEY = process.env.VUE_APP_RECAPTCHA_SITE_KEY ?? 'YOUR_SITE_KEY_HERE'; const App = { setup() { const { executeRecaptcha, recaptchaLoaded } = useReCaptcha() const handleRecaptcha = async () => { console.log('Executing reCAPTCHA...') // (optional) Wait until recaptcha has been loaded. await recaptchaLoaded() // Execute reCAPTCHA with a specific action. const token = await executeRecaptcha('submit_form') console.log('reCAPTCHA token:', token) // In a real application, you would send this token to your backend for verification. alert(`reCAPTCHA token: ${token}\n(Check console for more details)`) } return { handleRecaptcha } }, template: ` <div> <h1>Vue reCAPTCHA v3 Quickstart</h1> <p>Click the button below to execute a reCAPTCHA v3 action and get a token.</p> <button @click="handleRecaptcha">Execute reCAPTCHA</button> <p>Note: The reCAPTCHA badge might be hidden if 'useRecaptchaNet' is enabled or via instance methods.</p> </div> ` } createApp(App) .use(VueReCaptcha, { siteKey: VUE_APP_RECAPTCHA_SITE_KEY, loaderOptions: { useRecaptchaNet: true }}) .mount('#app')

Debug

Known issues

breakingVersion 2.0.0 of `vue-recaptcha-v3` introduces full support for Vue 3 and is not backward compatible with Vue 2 applications. Attempting to use v2.x with Vue 2 will result in runtime errors.

fix

For Vue 2 applications, use `vue-recaptcha-v3` version `^1.9.0`. For Vue 3, ensure you are on `^2.0.0` or later. Adjust your `package.json` accordingly and reinstall dependencies.

affects: >=2.0.0

gotchareCAPTCHA v3 requires a valid site key obtained from the Google reCAPTCHA admin console for your specific domain. Using an invalid or incorrect key will prevent reCAPTCHA from loading or executing correctly, leading to failed token generation.

fix

Register your domain on the Google reCAPTCHA admin console to obtain a site key. Ensure the site key passed to `Vue.use(VueReCaptcha, { siteKey: '...' })` matches the one configured for your domain.

affects: >=1.0.0

gotchaWhen using TypeScript with the Vue 3 Options API, instance properties like `$recaptcha`, `$recaptchaLoaded`, and `$recaptchaInstance` will not have type suggestions or checks by default.

fix

Create a `shims-vue-recaptcha-v3.d.ts` file and extend `ComponentCustomProperties` from `@vue/runtime-core` as described in the package's documentation to provide proper type inference.

affects: >=2.0.0

gotchaThe `useReCaptcha` composition function provides `executeRecaptcha` and `recaptchaLoaded`. Earlier versions of the documentation (and potentially common user typos) might refer to `useRecaptcha` or `executeRecaptcha` as `executeRecaptcha` (lowercase 'c').

fix

Always use the correct capitalization: `useReCaptcha` for the hook, and `executeRecaptcha` for the function returned by the hook. Refer to the latest package documentation for accurate symbol names.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: app.component is not a function

Attempting to use `vue-recaptcha-v3` v2.x (Vue 3 compatible) with a Vue 2 application setup (e.g., `import Vue from 'vue'; Vue.use(...)`).

fix

For Vue 2 applications, downgrade `vue-recaptcha-v3` to a `^1.9.0` version. For Vue 3, ensure your application setup uses `createApp()` and the correct import for `VueReCaptcha`.

Uncaught (in promise) Error: reCAPTCHA v3 site key not found

The `siteKey` option was either not provided or was an empty string during the plugin installation.

fix

Ensure you pass a valid Google reCAPTCHA v3 site key to the `Vue.use(VueReCaptcha, { siteKey: 'YOUR_SITE_KEY' })` configuration object.

Property '$recaptcha' does not exist on type 'ComponentPublicInstance<...>'

Using Vue 3 Options API with TypeScript without extending the Vue instance's type definitions for `$recaptcha` and related properties.

fix

Create a `shims-vue-recaptcha-v3.d.ts` file in your project with the provided type declarations from the package documentation to augment `ComponentCustomProperties`.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for the Vue.js framework. Version 2.x is for vue-recaptcha-v3 < 2.0.0, and Version 3.x is for vue-recaptcha-v3 >= 2.0.0.

recaptcha-v3requiredInternal dependency for handling the core reCAPTCHA v3 JavaScript API loading and execution.

Agent activity

28 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/AurityLab/vue-recaptcha-v3 ↗

packagehttps://www.npmjs.com/package/vue-recaptcha-v3 ↗