Google reCAPTCHA

🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js

Setup

Add @nuxtjs/recaptcha dependency with yarn or npm into your project
Add @nuxtjs/recaptcha to modules section of nuxt.config.js
Configure it:

{
  modules: [
    [
      '@nuxtjs/recaptcha', {
        /* reCAPTCHA options */
      }
    ],
  ]
}

using top level options

{
  modules: [
    '@nuxtjs/recaptcha',
  ],

  recaptcha: {
    /* reCAPTCHA options */
  },
}

Configuration

{
  // ...
  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)
  },
  // ...
}

Runtime config

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    recaptcha: {
      /* reCAPTCHA options */
      siteKey: process.env.RECAPTCHA_SITE_KEY // for example
    }
  }
}

Generate reCAPTCHA Site Keys

You can generate keys for the basic mode by registering a new site.

For the enterprise mode, use the Google Cloud Console.

Usage

reCAPTCHA v2

Add <recaptcha> component inside your form:

<form @submit.prevent="onSubmit">
  <input autocomplete="true" placeholder="Email" type="email" v-model="email">
  <input autocomplete="current-password" placeholder="Password" type="password" v-model="password">
  <recaptcha />
  <button type="submit">Sign In</button>
</form>

Call getResponse inside form submit handler to get reCAPTCHA token:

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:

reCAPTCHA v3

Call init function inside mounted hook of your page

async mounted() {
  try {
    await this.$recaptcha.init()
  } catch (e) {
    console.error(e);
  }
}

Call execute function form submit handler to get reCAPTCHA token:

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)
  }
}

Call destroy function inside beforeDestroy hook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)

beforeDestroy() {
  this.$recaptcha.destroy()
}

See:

Server Side

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)

Info Hiding Badges

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:

<small>This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

nuxt-community/recaptcha-module