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

    2.0.1 • Public • Published

    Vue reCAPTCHA-v3

    npm npm type definitions

    A simple and easy to use reCAPTCHA (v3 only) library for Vue based on reCAPTCHA-v3.

    The latest version of this package supports Vue 3! See here for Vue 2 usage.

    Install

    With NPM:

    $ npm install vue-recaptcha-v3

    With Yarn:

    $ yarn add vue-recaptcha-v3

    Prerequisites

    To use this package you only need a valid site key for your domain, which you can easily get here.

    Usage

    import Vue from 'vue'
    import { VueReCaptcha } from 'vue-recaptcha-v3'
    
    // For more options see below
    Vue.use(VueReCaptcha, { siteKey: '<site key>' })
    
    new Vue({
      methods: {
        async recaptcha() {
          // (optional) Wait until recaptcha has been loaded.
          await this.$recaptchaLoaded()
    
          // Execute reCAPTCHA with action "login".
          const token = await this.$recaptcha('login')
    
          // Do stuff with the received token.
        }
      },
      template: '<button @click="recaptcha">Execute recaptcha</button>'
    })

    Vue 3 Composition

    import { createApp } from 'vue'
    import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
    
    const component = {
      setup() {
        const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
    
        const recaptcha = async () => {
          // (optional) Wait until recaptcha has been loaded.
          await recaptchaLoaded()
    
          // Execute reCAPTCHA with action "login".
          const token = await executeRecaptcha('login')
    
          // Do stuff with the received token.
        }
    
        return {
          recaptcha
        }
      },
      template: '<button @click="recaptcha">Execute recaptcha</button>'
    }
    
    createApp(component)
      .use(VueReCaptcha, { siteKey: '<site key>' })

    TypeScript + Vue 3

    To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts and put the following inside it:

    import { ReCaptchaInstance } from 'recaptcha-v3'
    
    declare module '@vue/runtime-core' {
      interface ComponentCustomProperties {
        $recaptcha: (action: string) => Promise<string>
        $recaptchaLoaded: () => Promise<boolean>
        $recaptchaInstance: ReCaptchaInstance
      }
    }

    Options

    This plugin offers optional options to configure the behavior of some parts.

    Available options:

    Name Description Type Default value
    siteKey The site key for your domain from Google. string none
    loaderOptions Optional options for the recaptcha-v3 loader. The available options are described here. object null

    Usage

    To use the options just pass an object to the Vue.use(...) method. For example:

    import Vue from 'vue'
    import { VueReCaptcha } from 'vue-recaptcha-v3'
    
    Vue.use(VueReCaptcha, {
      siteKey: '<site key>',
      loaderOptions: {
        useRecaptchaNet: true
      }
    })

    Advanced usage

    Some topics which are not commonly used, but required in some cases.

    Access reCAPTCHA-v3 instance

    In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.

    const recaptcha = this.$recaptchaInstance
    
    // Hide reCAPTCHA badge:
    recaptcha.hideBadge()
    
    // Show reCAPTCHA badge:
    recaptcha.showBadge()

    Install

    npm i vue-recaptcha-v3

    DownloadsWeekly Downloads

    14,923

    Version

    2.0.1

    License

    Apache-2.0

    Unpacked Size

    21.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar