Проблема с методами recaptchaLoaded() и executeRecaptcha() в vue-recaptcha-v3 в приложении Nuxt 3
Я разрабатываю приложение на базе Nuxt 3 и столкнулся с проблемой использования пакета vue-recaptcha-v3. Я импортировал его как import { VueReCaptcha } from 'vue-recaptcha-v3' и попытался настроить плагин следующим образом:
export default defineNuxtPlugin(async (nuxtApp) => {
nuxtApp.vueApp.use(VueReCaptcha, {
siteKey: useRuntimeConfig().public.recaptchaSiteKey,
loaderOptions: {
autoHideBadge: true,
explicitRenderParameters: {
badge: 'bottomleft',
},
},
});
});
Однако, при использовании методов recaptchaLoaded() и executeRecaptcha() в файле composables/recaptcha.js, они всегда возвращают undefined. Вот мой код из файла composables/recaptcha.js:
import { useReCaptcha } from "vue-recaptcha-v3";
export const useReCaptchaToken = () => {
const recaptchaInstance = useReCaptcha();
const getToken = async (action) => {
const loaded = await recaptchaInstance?.recaptchaLoaded();
const token = await recaptchaInstance?.executeRecaptcha(action);
return token;
};
return { getToken };
};
File package.json:
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@types/node": "^18",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"nuxt": "^3.4.3",
"sass": "^1.58.0",
"scss": "^0.2.4",
"vue-tsc": "^1.6.4"
},
"dependencies": {
"@nuxt/types": "^2.16.3",
"@pinia/nuxt": "^0.4.10",
"pinia": "^2.0.36",
"vue-recaptcha-v3": "^2.0.1"
},
"overrides": {
"vue": "latest"
}
}
так же сам плагин подключается нормально
Как я могу решить эту проблему и заставить методы recaptchaLoaded() и executeRecaptcha() работать правильно в приложении Nuxt 3?