{"id":12559,"library":"vue-recaptcha-v3","title":"Vue reCAPTCHA v3 Integration","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/AurityLab/vue-recaptcha-v3","tags":["javascript","captcha","recaptcha","recaptcha-v3","vue","vuejs","typescript"],"install":[{"cmd":"npm install vue-recaptcha-v3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-recaptcha-v3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-recaptcha-v3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required 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.","package":"vue","optional":false},{"reason":"Internal dependency for handling the core reCAPTCHA v3 JavaScript API loading and execution.","package":"recaptcha-v3","optional":false}],"imports":[{"note":"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.","wrong":"const { VueReCaptcha } = require('vue-recaptcha-v3')","symbol":"VueReCaptcha","correct":"import { VueReCaptcha } from 'vue-recaptcha-v3'"},{"note":"Used with Vue 3's Composition API. Note the correct capitalization: `useReCaptcha`, not `useRecaptcha` as was a typo in earlier documentation.","wrong":"import { useRecaptcha } from 'vue-recaptcha-v3'","symbol":"useReCaptcha","correct":"import { useReCaptcha } from 'vue-recaptcha-v3'"},{"note":"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`.","wrong":"declare module 'vue' { interface Vue { $recaptcha: (action: string) => Promise } }","symbol":"ComponentCustomProperties","correct":"declare module '@vue/runtime-core' { interface ComponentCustomProperties { $recaptcha: (action: string) => Promise } }"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'\n\nconst VUE_APP_RECAPTCHA_SITE_KEY = process.env.VUE_APP_RECAPTCHA_SITE_KEY ?? 'YOUR_SITE_KEY_HERE';\n\nconst App = {\n setup() {\n const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()\n\n const handleRecaptcha = async () => {\n console.log('Executing reCAPTCHA...')\n // (optional) Wait until recaptcha has been loaded.\n await recaptchaLoaded()\n\n // Execute reCAPTCHA with a specific action.\n const token = await executeRecaptcha('submit_form')\n\n console.log('reCAPTCHA token:', token)\n // In a real application, you would send this token to your backend for verification.\n alert(`reCAPTCHA token: ${token}\\n(Check console for more details)`) \n }\n\n return {\n handleRecaptcha\n }\n },\n template: `\n
\n

Vue reCAPTCHA v3 Quickstart

\n

Click the button below to execute a reCAPTCHA v3 action and get a token.

\n \n

Note: The reCAPTCHA badge might be hidden if 'useRecaptchaNet' is enabled or via instance methods.

\n
\n `\n}\n\ncreateApp(App)\n .use(VueReCaptcha, { siteKey: VUE_APP_RECAPTCHA_SITE_KEY, loaderOptions: { useRecaptchaNet: true }})\n .mount('#app')","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"reCAPTCHA 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"When using TypeScript with the Vue 3 Options API, instance properties like `$recaptcha`, `$recaptchaLoaded`, and `$recaptchaInstance` will not have type suggestions or checks by default.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"The `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').","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"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(...)`).","error":"TypeError: app.component is not a function"},{"fix":"Ensure you pass a valid Google reCAPTCHA v3 site key to the `Vue.use(VueReCaptcha, { siteKey: 'YOUR_SITE_KEY' })` configuration object.","cause":"The `siteKey` option was either not provided or was an empty string during the plugin installation.","error":"Uncaught (in promise) Error: reCAPTCHA v3 site key not found"},{"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`.","cause":"Using Vue 3 Options API with TypeScript without extending the Vue instance's type definitions for `$recaptcha` and related properties.","error":"Property '$recaptcha' does not exist on type 'ComponentPublicInstance<...>'"}],"ecosystem":"npm"}