Why Am I Getting a 'ReCaptcha error: No key provided' When Using .env Variables in Nuxt.js?

Using .env Variables in Nuxt.js

Issue:

When configuring ReCaptcha in Nuxt.js by reading variables from an .env file, the application fails with a "ReCaptcha error: No key provided" console log error. The issue persists despite hard-coding the key directly, suggesting a problem with reading .env variables in nuxt.config.

Resolution:

If Nuxt.js version 2.13 or above is being used, the framework automatically supports .env variables. To access variables from .env:

1. Create an .env file at the project root and add keys and values, e.g.:

   RECAPTCHA_SITE_KEY=6L....

2. In nuxt.config.js, specify the variables under either publicRuntimeConfig or privateRuntimeConfig, depending on the access level:

   export default {
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
     }
   }

Differences:

• publicRuntimeConfig can be accessed anywhere.
• privateRuntimeConfig can only be used during SSR (server-side rendering).

Example:

this.$config.myPublicVariable  // accessing from Vue.js file

For Nuxt.js Version 3:

Define variables in runtimeConfig in nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      secret: process.env.SECRET,
    }
  }
}

In components or composables:

import { useRuntimeConfig } from '#app'
const config = useRuntimeConfig()

For additional information, refer to the official Nuxt.js documentation:
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

The above is the detailed content of Why Am I Getting a 'ReCaptcha error: No key provided' When Using .env Variables in Nuxt.js?. For more information, please follow other related articles on the PHP Chinese website!