Vue Google ReCAPTCHA Tutorial

Vue.Js , Vue

Nicesnippets

11212

06-03-2021


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/[email protected]/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...