Comment utiliser des variables .env dans NUXT 2 ou 3?

Question

J'ai un fichier .env dans la racine du projet et dans ma configuration NUXT, j'utilise des variables pour configurer reCAPTCHA comme ceci:

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

et dans .env comme ceci:

RECAPTCHA_SITE_KEY=6L....

mais l'application a toujours échoué avec l'erreur du journal de la console:

Erreur de recaptcha: Aucune clé fournie

Lorsque j'ai une touche de recaptcha du code difficile, comme ça comme ça: siteKey: 6L.... application commence à fonctionner, donc je suppose que le problème est de lire des accessoires .env dans nuxt.config

avez-vous une idée de la façon de le réparer?

EDIT: J'ai essayé de mettre à jour mon NUXT.Config de @kissu Recommandation et par exemple que j'ai trouvé ici: https://www.npmjs.com/package/@nuxtjs/recaptcha

donc, il y a de nouveau nuxt.config qui ne fonctionne pas non plus:

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

Answer 1

Vous pouvez également utiliser la propriété env avec NUXT NUXT.CONFIG.JS:

export default {
  // Environment variables
  env: {
    myVariable: process.env.NUXT_ENV_MY_VAR
  },
  ...
}

Puis dans votre plugin:

const myVar = process.env.myVariable