Vue Google ReCAPTCHA Tutorial

When “Vue Google ReCAPTCHA Tutorial” moves through design, development and browser testing, this delivery reference can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official Vue website before adopting it in production.

Mar 06, 2021

Hi Guys,

Today,I will learn you how to use google recaptcha in Vue. We will show example of vue google recaptcha. I will explain step by step vue google recaptcha tutorial. you easliy make google recaptcha in vue.I will install vue-recaptcha for vue google recaptcha.

Here, I will give you full example for google recaptcha in vue as bellow.

Install

$ npm install --save vue-recaptcha

Or via CDN:

CDN

<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>

The template – HTML

Now is an example of a form component in VueJS. The form is quite standard, but you can see a <vue-recaptcha> tag, which is a vue component wrapper for reCaptcha.

<template>
  <form :model="form" @submit.prevent="submit" ref="contactForm">
    <div class="form-group row">
      <label ...></label>
      <div class="col-sm-10">
        <input v-model="..." required="">
      </div>
    </div>
    <div class="form-group row">
      ...
    </div>
    <div class="form-group row">
      <label for="robot" class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <vue-recaptcha ref="recaptcha"
          @verify="onVerify" sitekey="/*/*/*/*/*/">
        </vue-recaptcha>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mb-2">Send</button>. 
  </form>
</template>

JAVASCRIPT

Here is an example,Te core of our component lives in the next Javascript. If we take a look of the vue-recaptcha tag, we have passed in a handler call onVerify, that will be called once the user is verified, and the sitekey that we obtained when we registered the reCaptcha instance in Google.

<script type="text/javascript">
import VueRecaptcha from 'vue-recaptcha';
export default {
  data() {
    return {
      form: {
        ...
        robot: false
      }
    }
  },
  methods: {
    submit: function() {
      if (this.form.robot) {
        ...
      }
    },
    onVerify: function (response) {
      if (response) this.form.robot = true;
    },
  },
  components: {
    'vue-recaptcha': VueRecaptcha
  },
}
</script>

It will help you...