vue3-recaptcha-v2

!GitHub package.json version
!npm bundle size
!NPM

reCAPTCHA v2 for Vue3 and Nuxt3.

Installation

install the packge from yarn:

``sh
$ yarn add vue3-recaptcha-v2
`

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

`typescript
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.

`typescript
// /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

`vue



`

$3

`vue



`

$3

Resets the reCAPTCHA widget.

`vue



`

$3

Gets the response for the reCAPTCHA widget.

`vue



`

Options

$3

| Options | Type | Required | Description | |
| ----------- | -------- | -------- | ------------------------------------------------------------------------------------------------------ | --- |
| sitekey | string | true | recaptcha siteKey | |
| cnDomains | string | | default is false. if you set true, script url is replace www.google.com with www.recaptcha.net | |

$3

#### Props

| Options | Type | Required | Description |
| ---------- | ------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------- |
| language | string | | recaptcha language, you can find code in language code |
| theme | light \| dark | | default is light, recaptcha theme |
| tabindex | number | | default is 0, tabindex |
| size | normal \| comapact \| invisible | | default is normal, recaptcha widget size |

#### emits

| Options | Type | Required | Description |
| ------------------ | -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| widget-id | (value:number)=>void | | when recaptcha widget is created, return widgetId |
| error-callback | ()=>void | | 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. |
| expired-callback | ()=>void | | The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. |
| load-callback | (response:unknown)=>void` | | The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback. |