How to use Recaptcha v3 with VueJS using uve-recaptcha-v3 when I get a vue_1.ref is not a function error?

Question

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

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

Answer 1

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 [email protected]

Answer 2

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

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