Registry / web-framework / vue-recaptcha

vue-recaptcha

library3.0.0-alpha.6jsnpmunverified

vue-recaptcha is a Vue component designed for straightforward integration of Google reCAPTCHA v2 (checkbox) and v3 (invisible) into Vue applications. The current stable version is v2.0.3, which primarily supports Vue 3, but also offers Vue 2 compatibility via `@vue/composition-api`. While major version releases (e.g., v1 to v2) have historically had slow cadences, minor bug fixes within a major version are released as needed. A v3.0.0-alpha.6 release is available, indicating future developments. Key differentiators include encapsulating the reCAPTCHA script loading and widget rendering within a declarative Vue component, automatically handling script loading by default since v2.0.0, and shipping with TypeScript definitions for improved developer experience. It simplifies the process of getting a reCAPTCHA token and handling verification events.

web-framework auth-security

npm install vue-recaptcha

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-RECAPTCHA

vue-recaptcha

web-frameworkjavascriptv3.0.0-alpha.6

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'

✗ import VueRecaptcha from 'vue-recaptcha'

Since v2.0.0, VueRecaptcha is a named export. Older versions used a default export.

VueRecaptcha

✓ import { VueRecaptcha } from 'vue-recaptcha'

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

The library is primarily designed for ES Modules. While CommonJS might work with transpilers, named ESM imports are the canonical approach.

VueRecaptchaProps

✓ import type { VueRecaptchaProps } from 'vue-recaptcha'

Type import for component props, useful for TypeScript projects.

This quickstart demonstrates a basic Vue 3 application using the VueRecaptcha component. It shows how to import and register the component, pass a site key, automatically load the reCAPTCHA script, and handle verification, expiration, and error events to display the reCAPTCHA token or messages.

import { createApp } from 'vue'; import { VueRecaptcha } from 'vue-recaptcha'; const app = createApp({ data() { return { sitekey: process.env.VUE_APP_RECAPTCHA_SITE_KEY ?? '', token: '', error: '' }; }, methods: { onVerify(response) { this.token = response; this.error = ''; console.log('reCAPTCHA token:', response); // Send token to your backend for verification }, onExpired() { this.token = ''; console.log('reCAPTCHA token expired.'); }, onError(error) { this.error = error; this.token = ''; console.error('reCAPTCHA error:', error); } }, template: ` <div> <h1>reCAPTCHA Example</h1> <VueRecaptcha :sitekey="sitekey" :loadRecaptchaScript="true" @verify="onVerify" @expired="onExpired" @error="onError" ></VueRecaptcha> <p v-if="token">Token: {{ token }}</p> <p v-if="error" style="color: red;">Error: {{ error }}</p> <p v-else-if="!token && sitekey">Waiting for reCAPTCHA verification...</p> <p v-else>Please set VUE_APP_RECAPTCHA_SITE_KEY environment variable.</p> </div> ` }); app.component('VueRecaptcha', VueRecaptcha); app.mount('#app');

Debug

Known issues

breakingVueRecaptcha changed from a default export to a named export.

fix

Change your import statement from `import VueRecaptcha from 'vue-recaptcha'` to `import { VueRecaptcha } from 'vue-recaptcha'`.

affects: >=2.0.0

breakingFor Vue 2 compatibility with vue-recaptcha v2.x, the `@vue/composition-api` package is now a required peer dependency.

fix

Install the composition API package: `npm install @vue/composition-api` or `yarn add @vue/composition-api`.

affects: >=2.0.0

breakingThe `loadRecaptchaScript` prop now defaults to `true`, meaning the component will automatically inject the reCAPTCHA script into your page. Previously, it defaulted to `false`.

fix

If you are manually loading the reCAPTCHA script, you should explicitly set `:loadRecaptchaScript="false"` on the component to prevent duplicate script loading.

affects: >=2.0.0

gotchaVersion 2.0.2 of the package had publishing issues and did not correctly update. It is recommended to skip this version.

fix

If you are on 2.0.2, upgrade directly to 2.0.3 or a later stable version to ensure all bug fixes are applied correctly.

affects: 2.0.2

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: VueRecaptcha

The VueRecaptcha component was not correctly imported or registered with your Vue application.

fix

Ensure you are using `import { VueRecaptcha } from 'vue-recaptcha'` and then registering it, e.g., `app.component('VueRecaptcha', VueRecaptcha)` or including it in your component's `components` option.

TypeError: VueRecaptcha is not a constructor (or is not a function)

This error often indicates an incorrect import style, attempting to use a named export as a default export or vice-versa.

fix

Since v2.0.0, `VueRecaptcha` is a named export. Use `import { VueRecaptcha } from 'vue-recaptcha'`.

ReferenceError: grecaptcha is not defined

The Google reCAPTCHA script (`https://www.google.com/recaptcha/api.js`) has not been loaded or is not available on the global `window` object when the component attempts to render.

fix

Ensure `:loadRecaptchaScript="true"` is set on the `VueRecaptcha` component, or manually load the script by including `<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>` in your `index.html` (if `loadRecaptchaScript` is `false`).

Upgrade

Version history

3.0.0-alpha.6latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue framework itself.

@vue/composition-apioptionalRequired for using vue-recaptcha v2.x with Vue 2 applications.

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/DanSnow/vue-recaptcha ↗

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