vue_1.ref is not a function - Error when loading through the Client API in Gridsome

[aidam38]

When I trying to use this plugin with Gridsome, I figured the proper way to load it is in the main.js file like this:

import { VueReCaptcha } from 'vue-recaptcha-v3'

// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue) {
  Vue.component('Layout', DefaultLayout)
  Vue.use(VueReCaptcha, { siteKey: '...' })
}

When I do that though, it seems that the import {... ref, ...} from 'vue' in the ReCaptchaVuePlugin.ts file fails, specifically the line const isLoaded = ref(false).

Anyone know how to fix?

Here's the documentation for the Client API: https://gridsome.org/docs/client-api/

[WipeAir]

Which version of this plugin are you using?

[aidam38]

vue-recaptcha-v3 2.0.0.

I'm using this blog starter: https://gridsome.org/starters/gridsome-blog-starter/ which uses Vue 3 (i assume). Probably not important to this though.

[WipeAir]

As far as I know, Gridsome does not yet support Vue 3.0. Therefore you may try version 1.9.0 (^1.9.0) of this plugin which is compatible with Vue 2.*.

[aidam38]

Oh, thanks, I'm a dummie, it works now!