Nuxt implementation — 500 error: document is not defined

[Krislunde]

Hey there,

I have implemented this package as outlined here, including optimizing the script loading. Nuxt 3.19.1.

However, the site is giving a 500 error, with the message document is not defined.

Additional console error:

The Google Captcha badge actually loads over the 500 error screen however. And it does seem to kind of work? If I save a file to cause a hot module refresh, the site will work and I can request a token through recaptcha — which makes it seem like this has to do with SSR, but definitely isolated to this library.

[debabin]

@Krislunde Hi, sorry for the long response. There's a bug in the documentation that we'll fix soon. To make the plugin work, just add .client to the plugin file.

However, we're still working on refining the module so that it has both a server and client side.

On the server side, we'll be inserting the script into the head ourselves.

[debabin]

google-recaptcha.client.ts

import { googleReCaptcha } from "@google-recaptcha/vue";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(googleReCaptcha, {
    type: "v3",
    siteKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
  });
});