vue-notifycaptcha

Description

Google ReCAPTCHA component for vue.

• Description
• Install
  • NPM
• Usage
  • Get started
  • Bind Challenge to Button
• API
  • Props
  • Methods
  • Events
• FAQ
  • What is "ReCAPTCHA couldn't find user-provided function: vueNotifyCaptchaApiLoaded"?

Install

NPM

$ npm install --save vue-notifycaptcha

Usage

Get started

Place this in head to load reCAPTCHA:

<script src="https://www.google.com/recaptcha/api.js?onload=vueNotifyCaptchaApiLoaded&render=explicit" async defer>
</script> 

With `onload` callback, it will notify us when the api is ready for use.

Then include vue-notifycaptcha in your app.

<template>
  <vue-notifycaptcha sitekey="Your key here"></vue-notifycaptcha>
</template>
 
<script>
  import VueNotifyCaptcha from 'vue-notifycaptcha';
  export default {
    ...
    components: { VueNotifyCaptcha }
  };
</script>

Bind Challenge to Button

<template>
  <vue-notifycaptcha sitekey="Your key here">
    <button>Click me</button>
  </vue-notifycaptcha>
</template>
 
<script>
  import VueNotifyCaptcha from 'vue-notifycaptcha';
  export default {
    ...
    components: { VueNotifyCaptcha }
  };
</script>

Notice: You could only place one element as vue-notifycaptcha child.

For more information, please reference to example

API

Props

• sitekey (required)
  ReCAPTCHA site key
• color (optional) (This translates into theme on the module for recaptcha (This was changed to fix a conflict))
  The color theme for reCAPTCHA
• type (optional)
  The type of reCAPTCHA
• size (optional)
  The size of reCAPTCHA
• tabindex (optional)
  The tabindex of reCAPTCHA
• badge (optional) (Invisible ReCAPTCHA only)
  Position of the reCAPTCHA badge

For more information, please reference to [ReCAPTCHA document][recaptcha-params] and [Invisible ReCAPTCHA document][invisible-recaptcha-params].

Methods

• reset
  Reset reCAPTCHA instance
• execute
  Invoke reCAPTCHA challenge

Events

• verify(response) Emit on reCAPTCHA verified response is the successful reCAPTCHA response
• expired() Emit on reCAPTCHA expired
• render(id) Emit on reCAPTCHA mounted on DOM id is the widget id of the component

FAQ

What is "ReCAPTCHA couldn't find user-provided function: vueNotifyCaptchaApiLoaded"?

It's because google's recaptcha have been loaded before your app. You can simply ignore it because vue-notifycaptcha can still detect and render recaptcha. If you care about this, try to move the script tag of recatpcha after to your app.