vrv

vue3-recaptcha-v2

reCAPTCHA v2 for Vue3 : CompositionAPI, Types

Showing:

Popularity

Downloads/wk

30

GitHub Stars

6

Maintenance

Last Commit

18d ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

vue3-recaptcha-v2

GitHub package.json version npm bundle size NPM

reCAPTCHA v2 for Vue3 : CompositionAPI, Types

If you use v0.x, recommend using v1.x or higher.

Installation

Yarn

$ yarn add vue3-recaptcha-v2

npm

$ npm install vue3-recaptcha-v2 --save

Example

Setup

// 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");

*install options

OptionTypeDescription
siteKeystring(required) recaptcha siteKey
alterDomainbooleantrue: domain replace www.google.com with www.recaptcha.net

Usage

<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>

API

Props

vue-recaptcha components props list

theme

  • optional
  • type : light | dark
  • default : light

size

  • optional
  • type : normal | compact | invisible
  • default : normal

tabindex

  • optional
  • type : number
  • default : 0

Emit

vue-recaptcha components emit list

widgetId

  • return : number

verify

  • return : string

expired

  • return : void

fail

  • return : void

methods

vue-recaptcha components methods list

resetRecaptcha

  • param : widgetId
  • return : void

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100