Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bbonch/vue3-recaptcha2
Vue v3 component for Google reCAPTCHA v2
https://github.com/bbonch/vue3-recaptcha2
Last synced: about 1 month ago
JSON representation
Vue v3 component for Google reCAPTCHA v2
- Host: GitHub
- URL: https://github.com/bbonch/vue3-recaptcha2
- Owner: bbonch
- Created: 2021-01-16T12:15:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-13T17:40:46.000Z (12 months ago)
- Last Synced: 2024-01-02T23:39:50.303Z (5 months ago)
- Language: Vue
- Homepage:
- Size: 27.3 KB
- Stars: 29
- Watchers: 1
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - vue3-recaptcha2 - Google reCAPTCHA 2 for Vue 3. (Components & Libraries / Integrations)
- awesome-vue - vue3-recaptcha2 - Google reCAPTCHA 2 for Vue 3. (Components & Libraries / Integrations)
README
vue3-recaptcha2
Vue v3 component for Google reCAPTCHA v2
## Installation
``` bash
npm install vue3-recaptcha2
```
## Example usage
### With bundlers
``` vue
import vueRecaptcha from 'vue3-recaptcha2';
export default {
name: 'app',
components: {
vueRecaptcha
},
data() {
return {
showRecaptcha: false,
loadingTimeout: 30000 // 30 seconds
}
},
methods: {
recaptchaVerified(response) {
},
recaptchaExpired() {
this.$refs.vueRecaptcha.reset();
},
recaptchaFailed() {
},
recaptchaError(reason) {
}
}
};
```
### With CDN
``` html
Show
const app = Vue.createApp({
name: "app",
components: {
VueRecaptcha
},
data() {
return {
show: false,
recaptcha: null,
recaptchaSiteKey: 'key'
}
},
methods: {
toggle() {
this.show = !this.show;
},
recaptchaUpdated(recaptcha) {
this.recaptcha = recaptcha;
}
}
});
app.mount("#app");
```
## 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.
- loading-timeout (optional)
Milliseconds to wait for widget to load before triggering a timeout error. Defaults to 0 (i.e. never timeout).
### 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
- error
The name of your callback function, executed when reCAPTCHA fails to load. If you specify a function here, you are responsible for either reloading (e.g. by unmounting / re-mounting the component) or notifying the user that they should reload / retry