npm

Need private packages and team management tools?Check out npm Orgs. »

vue-recaptcha

1.2.0 • Public • Published

vue-recaptcha

Greenkeeper badge devDependencies Status peerDependencies Status CircleCI npm version npm downloads

Buy Me A Coffee

Description

Notice: The document on github is always reference to master branch. For stable version, please read the document at NPM.

Google ReCAPTCHA component for vue. If you like this package, please leave a star on github.

This version is for Vue 2.0. If you need Vue 1.x support please reference to vue-v1.x.

reCAPTCHA V3

Notice: This project currently not supporting reCAPTCHA v3.

Install

NPM

$ npm install --save vue-recaptcha

CDN

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

Usage

Get started

Place this in head to load reCAPTCHA:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script> 
With `onload` callback, it will notify us when the api is ready for use.

Then include vue-recaptcha in your app.

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

Bind Challenge to Button

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

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

For more information, please reference to example

Auto-load <script>

If loadRecaptchaScript props is set to true, vue-recaptcha will inject the required <script> tag. This means that manually placing the <script> tag is unneccessary.

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

API

Props

  • sitekey (required)
    ReCAPTCHA site key
  • theme (optional)
    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
  • loadRecaptchaScript (optional)
    If loadRecaptchaScript is set to true, vue-recaptcha will inject the required <script> tag
    Default: false
  • recaptchaHost (optional)
    Set this to change the reCAPTCHA domain if neccessary, as described in ReCAPTCHA support
    Default: www.google.com
  • recaptchaScriptId (optional)
    Set this to change the injected <script> id. This should only be changed if it conflicts with existing id
    Default: __RECAPTCHA_SCRIPT

For more information, please reference to ReCAPTCHA document and Invisible ReCAPTCHA document.

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: vueRecaptchaApiLoaded"?

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

How to test vue-recaptcha?

You can mock window.grecaptcha to bypass google's recaptcha. Here is an example which work with jest.

How about an e2e testing (or integration testing)?

Please refernece to recaptcha's faq.

install

npm i vue-recaptcha

Downloadsweekly downloads

17,258

version

1.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability