reCAPTCHA v2
for Vue3
: CompositionAPI, Types
If you use v0.x
, recommend using v1.x
or higher.
$ yarn add vue3-recaptcha-v2
$ npm install vue3-recaptcha-v2 --save
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import VueRecaptcha from "vue3-recaptcha-v2";
const app = createApp(App);
app
.use(VueRecaptcha, {
siteKey: "your recaptcha sitekey",
alterDomain: false, // default: false
})
.mount("#app");
Option | Type | Description |
---|---|---|
siteKey |
string |
(required) recaptcha siteKey |
alterDomain |
boolean |
true : domain replace www.google.com with www.recaptcha.net |
<template>
<vue-recaptcha
theme="light"
size="normal"
:tabindex="0"
@widgetId="recaptchaWidget = $event"
@verify="callbackVerify($event)"
@expired="callbackExpired()"
@fail="callbackFail()"
/>
<button @click="actionReset()">reset!</button>
</template>
<script>
import { ref } from "vue";
import { VueRecaptcha, useRecaptcha } from "vue3-recaptcha-v2";
export default {
name: "recaptcha",
components: { VueRecaptcha },
setup: () => {
// Reset Recaptcha
const { resetRecaptcha } = useRecaptcha();
const recaptchaWidget = ref(null);
const callbackVerify = (response) => {
console.log(response);
};
const callbackExpired = () => {
console.log("expired!");
};
const callbackFail = () => {
console.log("fail");
};
// Reset Recaptcha action
const actionReset = () => {
resetRecaptcha(recaptchaWidget.value);
};
return {
recaptchaWidget,
callbackVerify,
callbackFail,
actionReset,
};
},
};
</script>
vue-recaptcha components props list
optional
- type :
light
|dark
- default :
light
optional
- type :
normal
|compact
|invisible
- default :
normal
optional
- type :
number
- default : 0
vue-recaptcha components emit list
- return :
number
- return :
string
- return :
void
- return :
void
vue-recaptcha components methods list
- param :
widgetId
- return :
void