{"id":12560,"library":"vue-recaptcha","title":"Vue reCAPTCHA Component","description":"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.","status":"active","version":"3.0.0-alpha.6","language":"javascript","source_language":"en","source_url":"https://github.com/DanSnow/vue-recaptcha","tags":["javascript","vue","component","vue-component","google-recaptcha","google-recaptcha-v3","recaptcha","recaptcha-v3","gcaptcha","typescript"],"install":[{"cmd":"npm install vue-recaptcha","lang":"bash","label":"npm"},{"cmd":"yarn add vue-recaptcha","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-recaptcha","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue framework itself.","package":"vue","optional":false},{"reason":"Required for using vue-recaptcha v2.x with Vue 2 applications.","package":"@vue/composition-api","optional":true}],"imports":[{"note":"Since v2.0.0, VueRecaptcha is a named export. Older versions used a default export.","wrong":"import VueRecaptcha from 'vue-recaptcha'","symbol":"VueRecaptcha","correct":"import { VueRecaptcha } from 'vue-recaptcha'"},{"note":"The library is primarily designed for ES Modules. While CommonJS might work with transpilers, named ESM imports are the canonical approach.","wrong":"const { VueRecaptcha } = require('vue-recaptcha')","symbol":"VueRecaptcha","correct":"import { VueRecaptcha } from 'vue-recaptcha'"},{"note":"Type import for component props, useful for TypeScript projects.","symbol":"VueRecaptchaProps","correct":"import type { VueRecaptchaProps } from 'vue-recaptcha'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { VueRecaptcha } from 'vue-recaptcha';\n\nconst app = createApp({\n data() {\n return {\n sitekey: process.env.VUE_APP_RECAPTCHA_SITE_KEY ?? '',\n token: '',\n error: ''\n };\n },\n methods: {\n onVerify(response) {\n this.token = response;\n this.error = '';\n console.log('reCAPTCHA token:', response);\n // Send token to your backend for verification\n },\n onExpired() {\n this.token = '';\n console.log('reCAPTCHA token expired.');\n },\n onError(error) {\n this.error = error;\n this.token = '';\n console.error('reCAPTCHA error:', error);\n }\n },\n template: `\n
\n

reCAPTCHA Example

\n \n

Token: {{ token }}

\n

Error: {{ error }}

\n

Waiting for reCAPTCHA verification...

\n

Please set VUE_APP_RECAPTCHA_SITE_KEY environment variable.

\n
\n `\n});\n\napp.component('VueRecaptcha', VueRecaptcha);\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"fix":"Change your import statement from `import VueRecaptcha from 'vue-recaptcha'` to `import { VueRecaptcha } from 'vue-recaptcha'`.","message":"VueRecaptcha changed from a default export to a named export.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install the composition API package: `npm install @vue/composition-api` or `yarn add @vue/composition-api`.","message":"For Vue 2 compatibility with vue-recaptcha v2.x, the `@vue/composition-api` package is now a required peer dependency.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If you are manually loading the reCAPTCHA script, you should explicitly set `:loadRecaptchaScript=\"false\"` on the component to prevent duplicate script loading.","message":"The `loadRecaptchaScript` prop now defaults to `true`, meaning the component will automatically inject the reCAPTCHA script into your page. Previously, it defaulted to `false`.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"Version 2.0.2 of the package had publishing issues and did not correctly update. It is recommended to skip this version.","severity":"gotcha","affected_versions":"2.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The VueRecaptcha component was not correctly imported or registered with your Vue application.","error":"[Vue warn]: Failed to resolve component: VueRecaptcha"},{"fix":"Since v2.0.0, `VueRecaptcha` is a named export. Use `import { VueRecaptcha } from 'vue-recaptcha'`.","cause":"This error often indicates an incorrect import style, attempting to use a named export as a default export or vice-versa.","error":"TypeError: VueRecaptcha is not a constructor (or is not a function)"},{"fix":"Ensure `:loadRecaptchaScript=\"true\"` is set on the `VueRecaptcha` component, or manually load the script by including `` in your `index.html` (if `loadRecaptchaScript` is `false`).","cause":"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.","error":"ReferenceError: grecaptcha is not defined"}],"ecosystem":"npm"}