Noisy Pneumatic Mnemonic

    vue-recaptcha
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    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 3 and 2.

    reCAPTCHA V3

    Notice: This project currently not supporting reCAPTCHA v3.

    Install

    NPM

    $ npm install --save vue-recaptcha

    Yarn

    $ yarn add vue-recaptcha

    CDN

    <!-- Make sure you load the vue-demi first -->
    <script src="https://unpkg.com/vue-demi@0.12.1/lib/index.iife.js"></script>
    
    <!-- Then load vue-recaptcha -->
    <script src="https://unpkg.com/vue-recaptcha@^2/dist/vue-recaptcha.js"></script>
    <!-- Minify -->
    <script src="https://unpkg.com/vue-recaptcha@^2/dist/vue-recaptcha.min.js"></script>

    Usage

    Get started

    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>

    Manually call challenge

    <template>
      <vue-recaptcha ref="recaptcha" sitekey="Your key here" />
    </template>
    
    <script>
      import { VueRecaptcha } from 'vue-recaptcha';
      export default {
        components: { VueRecaptcha }
    
        methods: {
          onEvent() {
            // when you need a reCAPTCHA challenge
            this.$refs.recaptcha.execute();
          }
        }
      };
    </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

    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 when set this to true, vue-recaptcha will inject the required <script> tag automatically. Disable this by setting this to false, and you need to inject the <script> tag manually. Please refer to Manually load script for more information. Default: true

    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 <script> 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 dynamically. 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

      <vue-recaptcha
        :siteKey="siteKey"
        @verify="verifyMethod"
        @expired="expiredMethod"
        @render="renderMethod"
        @error="errorMethod">
      </vue-recaptcha>

    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 reference to recaptcha's FAQ.

    Manually load <script>

    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.
    

    Install

    npm i vue-recaptcha

    DownloadsWeekly Downloads

    59,380

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    25.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • dansnow