Vue 3 Support

[aklinker1]

With Vue3 on the horizon, this library should probably support it. I've gotten started with Vue 3 in one of my projects, so I'll try and fork this and open a PR when I have time.

• vue@3.0.0-rc.5
• vue-recaptcha-v3@1.9.0

Typescript

Looks like this library is missing an install method?

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

createApp(App)
  .use(VueReCaptcha, { siteKey: '<token>' })
  .mount('#app');

Argument of type '(Vue: typeof import("<project>/node_modules/vue/dist/vue"), options: IReCaptchaOptions) => void' is not assignable to parameter of type 'Plugin_2'.
  Type '(Vue: typeof import("<project>/node_modules/vue/dist/vue"), options: IReCaptchaOptions) => void' is not assignable to type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.
    Type '(Vue: typeof import("<project>/node_modules/vue/dist/vue"), options: IReCaptchaOptions) => void' is not assignable to type 'PluginInstallFunction'.
      Types of parameters 'Vue' and 'app' are incompatible.
        Type 'App<any>' is missing the following properties from type 'typeof import("node_modules/vue/dist/vue")': compile, useCssModule, useCssVars, createApp, and 104 more.

Usage

If you ignore the TS error and continue on, you get an error at runtime because there is no longer a default export from vue:

Uncaught TypeError: Vue.prototype is undefined
    > VueReCaptcha ReCaptchaVuePlugin.js:46

[maharzan]

Anyone has a sample of how to integrate this in vue3?

[aklinker1]

Owner has been unresponsive to my PR, #218, so I've resigned myself to building a local .tgz package off my fork: https://github.com/aklinker1/vue-recaptcha-v3/tree/vue-3-support.

Checkout the README.md of the fork for usage examples. If you don't want to use composition, it works the exact same as before. For a better typescript setup using the old apis, you will have to add a shim.

git clone https://github.com/aklinker1/vue-recaptcha-v3.git
cd vue-recaptcha-v3

# I don't think yarn has a pack command like NPM, the output works for both
npm install
npm pack

That should output vue-recaptcha-v3-1.9.0.tgz. Copy it over to the project you want to use it in, I put it under local_modules/vue-recaptcha-v3-1.9.0-vue3.tgz then you can add it like so:

# npm
npm install ./local_modules/vue-recaptcha-v3-1.9.0-vue3.tgz

# yarn
yarn add ./local_modules/vue-recaptcha-v3-1.9.0-vue3.tgz

I have no clue what the standard is for this, but I like local_modules cause it sounds close to node_modules. You can put it wherever though, but make sure it's in the project and commited so you don't have to do this again if you have to reclone the project.

[maharzan]

Thanks. Any working example would be good. I am getting this in my package.json

"vue-recaptcha-v3": "file:local_modules/vue-recaptcha-v3-1.9.0.tgz",

and its saying failed to compile..

./src/main.js
Module not found: Error: Can't resolve 'vue-recaptcha-v3' in '/Applications/MAMP/htdocs/vue/myfoldername/src'

I already have an App component so not sure how to do 2 app components in main.js which I believe this code should go..