Skip to content

Vue v3 component for Google reCAPTCHA v2

Notifications You must be signed in to change notification settings

lulcho/vue3-recaptcha2

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue3-recaptcha2

Vue v3 component for Google reCAPTCHA v2

Installation

npm install vue3-recaptcha2

Example usage

<template>
  <vue-recaptcha v-show="showRecaptcha" siteKey="..."
		 size="normal" 
		 theme="light"
		 hl="tr"
		 @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: false }
  },
  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
  • hl (optional) Forces the widget to render in a specific language. Auto-detects the user's language if unspecified.

Methods

  • reset Resets the reCAPTCHA widget
  • execute Programmatically invoke the challenge

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

About

Vue v3 component for Google reCAPTCHA v2

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 97.3%
  • JavaScript 2.7%