Проблема с методами recaptchaLoaded() и executeRecaptcha() в vue-recaptcha-v3 в приложении Nuxt 3

Рейтинг: 0Ответов: 1Опубликовано: 17.05.2023

Я разрабатываю приложение на базе 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?

Ответы

▲ 0

Проблема была в том что я использовал метод getToken в другом файле composibles. Переместив метод в файл .vue в hook onMounted() все стало работать корректно.