Vue Google ReCAPTCHA Tutorial

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...