vue3-recaptcha-v2

reCAPTCHA v2 for Vue3 and Nuxt3.

Installation

install the packge from yarn:

$ yarn add vue3-recaptcha-v2

In Vue3, add it to your main.ts file:

import { createApp } from "vue";
import App from "./App.vue";

import { install } from "vue3-recaptcha-v2";

createApp(App)
  .use(install, {
    sitekey: "YOUT_SITE_KEY",
    cnDomains: false, // Optional, If you use in China, set this value true
  })
  .mount("#app");

In Nuxt3, add it to your plugin folder:

The file name must contain the .client.

// <ProjectRoot>/plugins/recaptcha.client.ts
import { install } from "vue3-recaptcha-v2";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(install, {
    sitekey: "YOUT_SITE_KEY",
    cnDomains: false,
  });
});

More detail about install options, you can check this Install Options

Usage

The components used are the same for Vue3 and Nuxt3. Only the installation is different.

For more information, including the props to change the language(hl option), check Component Options

<script setup lang="ts">
import { RecaptchaV2 } from "vue3-recaptcha-v2";

const handleWidgetId = (widgetId: number) => {
  console.log("Widget ID: ", widgetId);
};
const handleErrorCalback = () => {
  console.log("Error callback");
};
const handleExpiredCallback = () => {
  console.log("Expired callback");
};
const handleLoadCallback = (response: unknown) => {
  console.log("Load callback", response);
};
</script>

<template>
  <RecaptchaV2
    @widget-id="handleWidgetId"
    @error-callback="handleErrorCalback"
    @expired-callback="handleExpiredCallback"
    @load-callback="handleLoadCallback"
  />
</template>

Invisible widget

<script setup lang="ts">
import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";

const { handleExecute } = useRecaptcha();

const handleWidgetId = (widgetId: number) => {
  console.log("Widget ID: ", widgetId);
  handleExecute(widgetId);
};
</script>

<template>
  <RecaptchaV2 @widget-id="handleWidgetId" size="invisible" />
</template>

Reset widget

Resets the reCAPTCHA widget.

<script setup lang="ts">
import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";

const { handleReset } = useRecaptcha();

const handleWidgetId = (widgetId: number) => {
  console.log("Widget ID: ", widgetId);
  handleReset(widgetId);
};
</script>

<template>
  <RecaptchaV2 @widget-id="handleWidgetId" />
</template>

Get response widget

Gets the response for the reCAPTCHA widget.

<script setup lang="ts">
import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";

const { handleGetResponse } = useRecaptcha();

const handleWidgetId = (widgetId: number) => {
  console.log("Widget ID: ", widgetId);
  handleGetResponse(widgetId);
};
</script>

<template>
  <RecaptchaV2 @widget-id="handleWidgetId" />
</template>

Options

Install Options

Component Options

Props

emits