Simple and easy Google reCAPTCHA integration with Nuxt.js
npm install @nuxtjs/recaptcha[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Circle CI][circle-ci-src]][circle-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![Standard JS][standard-js-src]][standard-js-href]
> 🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js
1. Add @nuxtjs/recaptcha dependency with yarn or npm into your project
2. Add @nuxtjs/recaptcha to modules section of nuxt.config.js
3. Configure it:
``js`
{
modules: [
[
'@nuxtjs/recaptcha', {
/ reCAPTCHA options /
}
],
]
}
using top level options
`js
{
modules: [
'@nuxtjs/recaptcha',
],
recaptcha: {
/ reCAPTCHA options /
},
}
`
`js`
{
// ...
recaptcha: {
hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
language: String, // Recaptcha language (v2)
mode: String, // Mode: 'base', 'enterprise'
siteKey: String, // Site key for requests
version: Number, // Version
size: String // Size: 'compact', 'normal', 'invisible' (v2)
},
// ...
}
`js`
// nuxt.config.js
export default {
publicRuntimeConfig: {
recaptcha: {
/ reCAPTCHA options /
siteKey: process.env.RECAPTCHA_SITE_KEY // for example
}
}
}
You can generate keys for the basic mode by registering a new site.
For the enterprise mode, use the Google Cloud Console.
1. Add component inside your form:
`vue`
2. Call getResponse inside form submit handler to get reCAPTCHA token:
`js
async onSubmit() {
try {
const token = await this.$recaptcha.getResponse()
console.log('ReCaptcha token:', token)
// send token to server alongside your form data
// at the end you need to reset recaptcha
await this.$recaptcha.reset()
} catch (error) {
console.log('Login error:', error)
}
},
`
See:
- v2 example (base)
- v2 example (enterprise)
1. Call init function inside mounted hook of your page
`js`
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.error(e);
}
}
2. Call execute function form submit handler to get reCAPTCHA token:
`js
async onSubmit() {
try {
const token = await this.$recaptcha.execute('login')
console.log('ReCaptcha token:', token)
// send token to server alongside your form data
} catch (error) {
console.log('Login error:', error)
}
}
`
3. Call destroy function inside beforeDestroy hook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)
`js`
beforeDestroy() {
this.$recaptcha.destroy()
}
See:
- v3 example (base)
- v3 example (enterprise)
When 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.
You can find out how to verify token on the server side by looking at the server middleware inside v2 example. (The server side is same for both versions)
You'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.
For example:
`html`
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.
1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using
Copyright (c) mvrlin
[npm-version-src]: https://img.shields.io/npm/dt/@nuxtjs/recaptcha.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@nuxtjs/recaptcha
[npm-downloads-src]: https://img.shields.io/npm/v/@nuxtjs/recaptcha/latest.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/recaptcha
[circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/recaptcha-module.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/nuxt-community/recaptcha-module
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/recaptcha-module.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/@nuxtjs/recaptcha
[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com