bbonch / vue3-recaptcha2 Goto Github PK

I'm getting the following error when using the component:

Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
    r recaptcha__en.js:313
    renderRecaptcha index.js:46
    beforeMount index.js:74
recaptcha__en.js:313:258

It seems grecaptcha.render won't accept this.$refs.recaptcha as its first parameter.

Hello,

I try to use in codepen.io

But, no success.

I try in two ways.

1. Using import Demo vue3-recaptcha2 cnd
2. Embedded module vue3-recaptcha2 embedded

Whats is wrong? Or work only with node?

Thanks

Job

I observe that for every instantiation of the component, there's a

Describe the bug
When I load the page in vue v3, I may get an error in the console stating that "window.grecaptcha.render is not a function" and i can't get token from captcha

My Environment

OC: Windows 10
Library: Vue JS v3 with class component
Browser: Chrome, Edge

To Reproduce
Steps to reproduce the behavior:

1. install library with npm
2. add script for grecaptcha
3. reproduce example from Readme.md in class component
4. run npm run serve and open in browser
5. open console

Expected behavior:
getting token and recaptcha icon showing

Would be nice to add prop language at least

If the window.grecaptcha is not null, the $refs.recaptach in the renderRecaptcha function will not work because we are in the context of "BeforeMount", so the component is not mounted.

You could add a setTimeout in the renderRecaptcha to wait the next frame in this case

Hi, i have an problem with typescript in vue3 composition api for build.

There are types at '/home/serii/Sites/vue/vue-silcompa/node_modules/vue3-recaptcha2/dist_types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue3-recaptcha2' library may need to update its package.json or typings.

I fixed directly in node_modules in vue3-recaptcha2/package.json, replaced this code:

  "exports": {
    ".": {
      "import": {
        "types": "./dist_types/index.d.ts",
        "node": "./index.mjs",
        "default": "./dist/vue3-recaptcha2.es.js"
      },
      "require": "./dist/vue3-recaptcha2.umd.js"
    }
  },

Can you update the package?

Good job !

However, there is a typo in the props.. You wrote two times "show" so the component is expected a number for the show props 😄

I just follow the example:

<template>
  <vue-recaptcha
          siteKey="..."
          :show="show"
          size="normal"
          theme="dark"
          @verify="recaptchaVerified"
          @expire="recaptchaExpired"
          @fail="recaptchaFailed"
          ref="recaptcha">
  </vue-recaptcha>
</template>

<script>
import { defineComponent, ref } from 'vue';
import vueRecaptcha from 'vue3-recaptcha2';

export default defineComponent({
  components: {
     vueRecaptcha
  },
  setup(){
    const recaptcha = ref('')

    return{
      recaptcha,

      show: ref(false),
      recaptchaVerified(response) {},
      recaptchaExpired() {
        recaptcha.value.reset();
      },
      recaptchaFailed() {}
    }
  }
})
</script>

Hey, your package is exactly what I've been searching for! Can you make this available with an Open Source license?

Hi,

Isn't there a way to activate a test mode, so we can use it in our development environment?

Thank you