8

I am using vue-recaptcha-v3 in a VueJS app but am immediately getting an error. My main.js looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, { siteKey: 'MYSITEKEY' })

Vue.use(Buefy)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Unfortunately when I hit save I get the error below (screenshot included):

Uncaught TypeError: vue_1.ref is not a function

enter image description here

which relates to the following piece of the vue-recaptcha-v3 package:

exports.VueReCaptcha = {
    install: function (app, options) {
        var isLoaded = vue_1.ref(false);
        var instance = vue_1.ref(undefined);

Not sure where to go from here...

Johnny John Boy
  • 3,009
  • 5
  • 26
  • 50

3 Answers3

12

I have had the same issue, it seems the most recent package version has this obvious runtime error. However version 1.9.0 works great. So just remove the current package if you use yarn run the following (otherwise the npm equivalent):

yarn add vue-recaptcha-v3@1.9.0
veryxcit
  • 419
  • 1
  • 3
  • 8
  • Same issue here, worked for me, 10x!!! By the way... do you get this console error too? Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame. at :1:16 – Oranit Dar Dec 24 '20 at 07:02
4

vue-recaptcha-v3 master branch is now using Vue 3.

You're probably using Vue 2, so you should follow the instructions here.

Linuslabo
  • 1,568
  • 2
  • 24
  • 34
0

If the type of the package does not influence much what you need. here's one that i use and that works for me. Link: https://www.npmjs.com/package/vue-recaptcha After installing you just need to import it into your form.

import VueRecaptcha from 'vue-recaptcha';

Using:

<vue-recaptcha
        @expired="captchar = false"
        class="mr-8"
        @render="cargarCaptchar = true"
        @error="captchar = false"
        @verify="captchar = true"
        sitekey="your code"/>

If that doesn't work, add the following tag to the page header:

<script src = "https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" defer> </script>

If you find that this is not feasible for your project. No problem, as I still think you can help other fellow beginners.

Rafael Furtado
  • 89
  • 7