Need help with vue-recaptcha?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

DanSnow
664 Stars 83 Forks MIT License 826 Commits 7 Opened issues

Description

Google ReCAPTCHA component for Vue.js

Services available

!
?

Need anything else?

Contributors list

# 63,576
Vue.js
google-...
CSS
tailwin...
367 commits
# 181
nextjs
postman...
graphql...
angular...
151 commits
# 84
netlify
TypeScr...
GraphQL
angular...
14 commits
# 582,813
Vue.js
HTML
TypeScr...
recaptc...
2 commits
# 161,291
HTML
google-...
faceboo...
PHP
1 commit
# 529,721
gh-page...
CSS
HTML
Shell
1 commit
# 152,774
crdt
HTML
CSS
Shell
1 commit
# 628,108
Vue.js
HTML
TypeScr...
recaptc...
1 commit
# 170,528
PHP
Laravel
Vue.js
google-...
1 commit
# 70,864
Crystal
PHP
Shell
Yii Fra...
1 commit

vue-recaptcha

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


Usage

Get started

Place this in head to load reCAPTCHA:

html

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

Then include

vue-recaptcha
in your app.

Bind Challenge to Button

Notice: You could only place one element as

vue-recaptcha
child.

For more information, please reference to example

Auto-load

If

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

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
     tag
    Default: 
    false

The following props will only work when

loadRecaptchaScript
is set as
true
  • 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
     id. This should only be changed if it conflicts with existing id
    Default: 
    __RECAPTCHA_SCRIPT
  • language (optional) Set this to change the reCAPTCHA language if necessary, as described in ReCAPTCHA support Default: ''
    // user browser language by default

    Notice: It'll not work as you expecting when you change this props dynamicly. Since it's impossible to change the language without a full page reloading

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
  • error() Emit when reCAPTCHA encounters an error

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.