0

I am trying to incorporate recaptcha in vue.js, I am also using Laravel 5.6.7

Vue Package for Captcha

https://github.com/DanSnow/vue-recaptcha#install

Blade

<div class="col-md-8">
    <login></login>
</div>

app.js

import VueRecaptcha from 'vue-recaptcha';
Vue.use(VueRecaptcha);

Vue.component('login', require('./components/login.vue'));

Login Component in vue.js

<template>
    <div>
        <div class="form-group row">
            <div class="col-md-6">
                <div class="g-recaptcha" data-sitekey="My site key">
                </div>
            </div>
        </div>
    </div>
</template>

Problem

I placed the div for captcha but it renders nothing. Am I missing anything?

Pankaj
  • 9,749
  • 32
  • 139
  • 283

1 Answers1

0

As stated in documentation, VueRecaptcha was imported and added to as component. 

import VueRecaptcha from 'vue-recaptcha';
export default {
    ...
    components: { VueRecaptcha }
};

In the template it stated to use the vue-recaptcha tag.

<vue-recaptcha sitekey="Your key here">
    <button>Click me</button>
</vue-recaptcha>
Dencio
  • 518
  • 3
  • 12
  • Where to write this `export default {` ? inside the component or inside app.js? – Pankaj Mar 19 '18 at 01:00
  • Basically, you can write it in your Vue instance or `Vue.component('vue-recaptcha', VueRecaptcha);` – Dencio Mar 19 '18 at 01:04
  • Or you can try to `Vue.use(VueRecaptcha);` and use `vue-recaptcha` tag if it do works. – Dencio Mar 19 '18 at 01:08
  • can u suggest here? https://stackoverflow.com/questions/49364689/captcha-form-validation-required-error-message-in-vue-recaptcha – Pankaj Mar 19 '18 at 13:56