vue3-recaptcha2/dist/vue3-recaptcha2.es.js

Vue v3 component for Google reCAPTCHA v2

import { defineComponent, ref, onMounted, openBlock, createElementBlock } from "vue";
const _sfc_main = defineComponent({
  __name: "vueRecaptcha",
  props: {
    sitekey: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: false,
      default: "normal"
    },
    theme: {
      type: String,
      required: false,
      default: "light"
    },
    hl: {
      type: String,
      required: false
    },
    loadingTimeout: {
      type: Number,
      required: false,
      default: 0
    }
  },
  emits: {
    verify: (response) => {
      if (response != null && response != "")
        return true;
      else
        return false;
    },
    error: (reason) => reason,
    expire: null,
    fail: null
  },
  setup(__props, { expose: __expose, emit }) {
    const props = __props;
    const recaptchaDiv = ref(null);
    let recaptcha = null;
    __expose({
      execute: function() {
        window.grecaptcha.execute(recaptcha);
      },
      reset: function() {
        window.grecaptcha.reset(recaptcha);
      }
    });
    function renderRecaptcha() {
      recaptcha = window.grecaptcha.render(recaptchaDiv.value, {
        "sitekey": props.sitekey,
        "theme": props.theme,
        "size": props.size,
        "callback": (response) => emit("verify", response),
        "expired-callback": () => emit("expire"),
        "error-callback": () => emit("fail")
      });
    }
    onMounted(() => {
      if (window.grecaptcha == null) {
        new Promise((resolve, reject) => {
          let loadingCountdown;
          let responded = false;
          window.recaptchaReady = function() {
            if (responded)
              return;
            responded = true;
            clearTimeout(loadingCountdown);
            resolve();
          };
          const scriptId = "recaptcha-script";
          const loadingFailed = (reason) => {
            return () => {
              var _a;
              if (responded)
                return;
              responded = true;
              clearTimeout(loadingCountdown);
              (_a = document.getElementById(scriptId)) == null ? void 0 : _a.remove();
              reject(reason);
            };
          };
          if (props.loadingTimeout > 0)
            loadingCountdown = setTimeout(loadingFailed("timeout"), props.loadingTimeout);
          const doc = window.document;
          const scriptTag = doc.createElement("script");
          scriptTag.id = scriptId;
          scriptTag.onerror = loadingFailed("error");
          scriptTag.onabort = loadingFailed("aborted");
          scriptTag.setAttribute("src", `https://www.google.com/recaptcha/api.js?onload=recaptchaReady&render=explicit&hl=${props.hl}&_=${+new Date()}`);
          doc.head.appendChild(scriptTag);
        }).then(() => {
          renderRecaptcha();
        }).catch((err) => {
          emit("error", err);
        });
      } else {
        renderRecaptcha();
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "recaptchaDiv",
        ref: recaptchaDiv
      }, null, 512);
    };
  }
});
export { _sfc_main as default };