Regresar

Cómo acceder a variables de entorno en un proyecto Nuxt.js 3 estático

por Jorge, 24-Mar-2023

Para acceder a las variables de entorno en un proyecto Nuxt.js 3 estático, puedes usar el objeto publicRuntimeConfig en el archivo nuxt.config.js.

A continuación se presentan los pasos para acceder a las variables de entorno en un proyecto Nuxt.js 3 estático:

Define tus variables de entorno en un archivo .env en la raíz de tu proyecto. Por ejemplo:


MY_VARIABLE=my_value
  1. En el archivo nuxt.config.js, agrega el siguiente código:

arduino

export default {
  publicRuntimeConfig: {
    myVariable: process.env.MY_VARIABLE
  }
}

Esto expondrá tu variable de entorno MY_VARIABLE como una propiedad myVariable en el objeto publicRuntimeConfig.

Ahora puedes acceder a la variable de entorno en tus componentes de la siguiente manera:


export default {
  async fetch() {
    const myVariable = this.$config.myVariable
    console.log(myVariable)
  }
}

Ten en cuenta que debes usar this.$config.myVariable en lugar de process.env.MY_VARIABLE para acceder a la variable de entorno en tus componentes.

¡Eso es todo! Ahora deberías poder acceder a las variables de entorno en tu proyecto Nuxt.js 3 estático.