vue3-recaptcha2

Vue v3 component for Google reCAPTCHA v2

Usage no npm install needed!

<script type="module">
  import vue3Recaptcha2 from 'https://cdn.skypack.dev/vue3-recaptcha2';
</script>

README

vue3-recaptcha2

Vue v3 component for Google reCAPTCHA v2

Installation

npm install vue3-recaptcha2

Example usage

<template>
  <vue-recaptcha v-if="showRecaptcha" siteKey="..."
         size="normal" 
         theme="light"
         :tabindex="0"
         @verify="recaptchaVerified"
         @expire="recaptchaExpired"
         @fail="recaptchaFailed"
         ref="vueRecaptcha">
  </vue-recaptcha>
</template>

<script>
import vueRecaptcha from 'vue3-recaptcha2';

export default {
  name: 'app',
  components: {
    vueRecaptcha
  },
  data() {
    return { showRecaptcha: true }
  },
  methods: {
    recaptchaVerified(response) {
    },
    recaptchaExpired() {
      this.$refs.vueRecaptcha.reset();
    },
    recaptchaFailed() {
    }
  }
};
</script>

API

Props

  • sitekey (required) Your sitekey
  • size (optional) The size of the widget
  • theme (optional) The color theme of the widget
  • tabindex (optional) The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier

Methods

  • reset Resets the reCAPTCHA widget

Events

  • verify(response) The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback
  • expire The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify
  • fail The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry