{"id":13506571,"url":"https://github.com/nuxt-community/recaptcha-module","last_synced_at":"2025-05-16T09:06:23.772Z","repository":{"id":43768208,"uuid":"170271842","full_name":"nuxt-community/recaptcha-module","owner":"nuxt-community","description":"🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js","archived":false,"fork":false,"pushed_at":"2024-06-15T15:51:58.000Z","size":500,"stargazers_count":255,"open_issues_count":35,"forks_count":63,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-13T03:34:39.856Z","etag":null,"topics":["captcha","grecaptcha","nuxt","nuxt-module","recaptcha"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxt-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-12T07:23:13.000Z","updated_at":"2025-05-12T10:33:54.000Z","dependencies_parsed_at":"2024-06-18T13:54:36.868Z","dependency_job_id":"cc557f14-8089-4daa-990d-978072de036c","html_url":"https://github.com/nuxt-community/recaptcha-module","commit_stats":{"total_commits":102,"total_committers":20,"mean_commits":5.1,"dds":"0.43137254901960786","last_synced_commit":"c3122a5a574c63bc120a5752769ba092fee53bac"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frecaptcha-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frecaptcha-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frecaptcha-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frecaptcha-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-community","download_url":"https://codeload.github.com/nuxt-community/recaptcha-module/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501558,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["captcha","grecaptcha","nuxt","nuxt-module","recaptcha"],"created_at":"2024-08-01T01:00:53.892Z","updated_at":"2025-05-16T09:06:18.763Z","avatar_url":"https://github.com/nuxt-community.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"# Google reCAPTCHA\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Circle CI][circle-ci-src]][circle-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![Standard JS][standard-js-src]][standard-js-href]\n\n\u003e 🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Setup\n\n1. Add `@nuxtjs/recaptcha` dependency with `yarn` or `npm` into your project\n2. Add `@nuxtjs/recaptcha` to `modules` section of `nuxt.config.js`\n3. Configure it:\n\n```js\n{\n  modules: [\n    [\n      '@nuxtjs/recaptcha', {\n        /* reCAPTCHA options */\n      }\n    ],\n  ]\n}\n```\n\nusing top level options\n\n```js\n{\n  modules: [\n    '@nuxtjs/recaptcha',\n  ],\n\n  recaptcha: {\n    /* reCAPTCHA options */\n  },\n}\n```\n\n## Configuration\n\n```js\n{\n  // ...\n  recaptcha: {\n    hideBadge: Boolean, // Hide badge element (v3 \u0026 v2 via size=invisible)\n    language: String,   // Recaptcha language (v2)\n    mode: String,       // Mode: 'base', 'enterprise'\n    siteKey: String,    // Site key for requests\n    version: Number,    // Version\n    size: String        // Size: 'compact', 'normal', 'invisible' (v2)\n  },\n  // ...\n}\n```\n\n## Runtime config\n\n```js\n// nuxt.config.js\nexport default {\n  publicRuntimeConfig: {\n    recaptcha: {\n      /* reCAPTCHA options */\n      siteKey: process.env.RECAPTCHA_SITE_KEY // for example\n    }\n  }\n}\n```\n\n## Generate reCAPTCHA Site Keys\n\nYou can generate keys for the `basic` mode [by registering a new site](https://www.google.com/recaptcha/admin/create).\n\nFor the `enterprise` mode, [use the Google Cloud Console](https://console.cloud.google.com/security/recaptcha).\n\n## Usage\n\n### reCAPTCHA v2\n\n1. Add `\u003crecaptcha\u003e` component inside your form:\n\n```vue\n\u003cform @submit.prevent=\"onSubmit\"\u003e\n  \u003cinput autocomplete=\"true\" placeholder=\"Email\" type=\"email\" v-model=\"email\"\u003e\n  \u003cinput autocomplete=\"current-password\" placeholder=\"Password\" type=\"password\" v-model=\"password\"\u003e\n  \u003crecaptcha /\u003e\n  \u003cbutton type=\"submit\"\u003eSign In\u003c/button\u003e\n\u003c/form\u003e\n```\n\n2. Call `getResponse` inside form submit handler to get reCAPTCHA token:\n\n```js\nasync onSubmit() {\n  try {\n    const token = await this.$recaptcha.getResponse()\n    console.log('ReCaptcha token:', token)\n\n    // send token to server alongside your form data\n\n    // at the end you need to reset recaptcha\n    await this.$recaptcha.reset()\n  } catch (error) {\n    console.log('Login error:', error)\n  }\n},\n```\nSee:\n- [v2 example (base)](https://github.com/nuxt-community/recaptcha-module/tree/master/example/base/v2)\n- [v2 example (enterprise)](https://github.com/nuxt-community/recaptcha-module/tree/master/example/enterprise/v2)\n\n### reCAPTCHA v3\n\n1. Call `init` function inside `mounted` hook of your page\n\n```js\nasync mounted() {\n  try {\n    await this.$recaptcha.init()\n  } catch (e) {\n    console.error(e);\n  }\n}\n```\n\n2. Call `execute` function form submit handler to get reCAPTCHA token:\n\n```js\nasync onSubmit() {\n  try {\n    const token = await this.$recaptcha.execute('login')\n    console.log('ReCaptcha token:', token)\n\n    // send token to server alongside your form data\n\n  } catch (error) {\n    console.log('Login error:', error)\n  }\n}\n```\n\n3. Call `destroy` function inside `beforeDestroy` hook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)\n\n```js\nbeforeDestroy() {\n  this.$recaptcha.destroy()\n}\n```\n\nSee:\n- [v3 example (base)](https://github.com/nuxt-community/recaptcha-module/tree/master/example/base/v3)\n- [v3 example (enterprise)](https://github.com/nuxt-community/recaptcha-module/tree/master/example/enterprise/v3)\n\n\n### Server Side\n\nWhen you send `data + token` to the server, you should verify the token on the server side to make sure it does not requested from a bot.\nYou can find out how to verify token on the server side by looking at the [server middleware](https://github.com/nuxt-community/recaptcha-module/blob/master/example/base/v2/api/recaptcha.js) inside v2 example. (The server side is same for both versions)\n\n\n## Info Hiding Badges\n\nYou're allowed to hide the badge (i.e. for v3 and v2 invisible), as long as you include the recaptcha branding in the user flow.\n\nFor example:\n\n```html\n\u003csmall\u003eThis site is protected by reCAPTCHA and the Google\n    \u003ca href=\"https://policies.google.com/privacy\"\u003ePrivacy Policy\u003c/a\u003e and\n    \u003ca href=\"https://policies.google.com/terms\"\u003eTerms of Service\u003c/a\u003e apply.\n\u003c/small\u003e\n```\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) mvrlin \u003cmvrlin@pm.me\u003e\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/dt/@nuxtjs/recaptcha.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@nuxtjs/recaptcha\n[npm-downloads-src]: https://img.shields.io/npm/v/@nuxtjs/recaptcha/latest.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/recaptcha\n[circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/recaptcha-module.svg?style=flat-square\n[circle-ci-href]: https://circleci.com/gh/nuxt-community/recaptcha-module\n[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/recaptcha-module.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/@nuxtjs/recaptcha\n[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square\n[standard-js-href]: https://standardjs.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Frecaptcha-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-community%2Frecaptcha-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Frecaptcha-module/lists"}