Чтобы динамически интегрировать Google reCaptcha v3 в проект на Nuxt 3, важно правильно управлять инициализацией и очищением экземпляра reCaptcha при переходах между страницами. Это позволит избежать проблем с отображением иконки, когда она не требуется.
Вот пример того, как можно организовать ваш композабл для динамической интеграции reCaptcha v3:
### Шаг 1: Установка зависимостей
Если вы еще не установили зависимости, выполните их установку:
```bash
npm install vue-recaptcha-v3
```
### Шаг 2: Создание композабла
Создайте файл `useGoogleReCaptcha.js` в папке `composables` вашего проекта:
```javascript
import { ref } from 'vue';
import { useReCaptcha } from 'vue-recaptcha-v3';
export const useGoogleReCaptcha = () => {
const recaptchaInstance = ref(null);
const { executeRecaptcha, setKey, getKey } = useReCaptcha();
const initReCaptcha = () => {
if (!recaptchaInstance.value) {
recaptchaInstance.value = true;
setKey('<YOUR_RECAPTCHA_SITE_KEY>');
// optionally load reCaptcha script
}
};
const clearReCaptcha = () => {
if (recaptchaInstance.value) {
recaptchaInstance.value = null;
// optional cleanup if needed
}
};
return {
initReCaptcha,
clearReCaptcha,
executeRecaptcha,
};
};
```
### Шаг 3: Использование в компонентах
Теперь в любом компоненте, где вам нужно использовать reCaptcha, вы можете сделать следующее:
```vue
<template>
<div>
<button @click="onSubmit">Отправить</button>
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useGoogleReCaptcha } from '@/composables/useGoogleReCaptcha';
const { initReCaptcha, clearReCaptcha, executeRecaptcha } = useGoogleReCaptcha();
const onSubmit = async () => {
// Выполняем reCaptcha, если необходимо
const token = await executeRecaptcha('form_submit');
console.log(token); // Отправьте токен на сервер для проверки
}
onMounted(() => {
initReCaptcha();
});
onBeforeUnmount(() => {
clearReCaptcha();
});
</script>
```
### Шаг 4: Управление состоянием
Убедитесь, что `initReCaptcha` вызывается только тогда, когда рекапча необходима, а `clearReCaptcha` вызывается перед уничтожением компонента. Это гарантирует, что рекапча загружается только на страницах, где это требуется, и правильно очищается при переходе на другую страницу.
### Дополнительные поправки
Если проблема сохраняется, и иконка каптчи не исчезает по вашему шаблону, вы можете еще добавить проверку, чтобы реализовать логику показа и скрытия в зависимости от состояния вашего приложения:
```javascript
const isReCaptchaNeeded = ref(false);
const initReCaptcha = () => {
if (isReCaptchaNeeded.value) return;
// ... остальная инициализация
};
const onNavigate = () => {
isReCaptchaNeeded.value = false; // Сбросить флаг перед переходом
clearReCaptcha();
};
// Обязательно вызывайте onNavigate до перехода по ссылке
```
Таким образом, вы можете точно контролировать, когда и иконка рекапчи будет показана или скрыта, предотвращая ненужные запросы к API и соблюдая политику Google.