如何仅在特定页面加载Nuxt 3的vue-recaptcha-v3插件？

方案一：在注册页面组件内局部初始化（推荐） #

这种方式完全避免全局加载，仅在注册页面渲染时初始化reCAPTCHA：

1. 删除plugins/google-recaptcha.ts全局插件文件。
2. 在你的注册页面组件（比如pages/register.vue）中添加以下代码：

<script setup>
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3';
import { onMounted } from 'vue';

const nuxtApp = useNuxtApp();
const config = useRuntimeConfig();

// 仅在客户端挂载时初始化reCAPTCHA
onMounted(async () => {
  // 注册VueReCaptcha插件到当前应用实例
  nuxtApp.vueApp.use(VueReCaptcha, {
    siteKey: config.public.recaptchaKey,
    loaderOptions: {
      autoHideBadge: false,
      explicitRenderParameters: {
        badge: 'bottomleft'
      }
    }
  });

  // 初始化后即可使用reCAPTCHA功能
  const recaptcha = useReCaptcha();
  // 示例：获取验证token（在表单提交时调用）
  const fetchRecaptchaToken = async () => {
    try {
      const token = await recaptcha.execute('register');
      // 将token传入你的注册请求参数中
      console.log('reCAPTCHA token:', token);
      return token;
    } catch (err) {
      console.error('reCAPTCHA获取失败:', err);
    }
  };
});
</script>

方案二：通过全局插件的路由条件判断加载 #

如果你想保留插件文件，可通过路由判断仅在注册页面初始化reCAPTCHA：

1. 将插件文件重命名为google-recaptcha.client.ts（确保仅在客户端执行）。
2. 修改插件代码如下：

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

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const route = useRoute();

  // 匹配注册页面的路由路径（根据你的实际路由调整）
  const isRegisterPage = route.path === '/register';

  if (isRegisterPage) {
    nuxtApp.vueApp.use(VueReCaptcha, {
      siteKey: config.public.recaptchaKey,
      loaderOptions: {
        autoHideBadge: false,
        explicitRenderParameters: {
          badge: 'bottomleft'
        }
      }
    });
  }
});

注：这种方式下插件本身会在所有客户端页面加载，但仅在注册页面执行初始化逻辑，reCAPTCHA脚本也只会此时加载。

补充配置 #

确保你的nuxt.config.ts中已配置公开的reCAPTCHA密钥：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaKey: '你的reCAPTCHA站点密钥'
    }
  }
});

内容的提问来源于stack exchange，提问作者hatja