1

I am trying to use environment variables in my nuxt 2.15.8 project for development and production. First i used .env file and then i saw in the documentation that i can use runTimeConfig as best practice.

So i tried to use:

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    apiUrl: process.env.API_URL,
    bucket: process.env.BUCKET,
  },
  privateRuntimeConfig: {
    passwordEncryptKey: process.env.PASSWORD_ENCRYPT_KEY,
  }
}

And then i my vue files this.$config.apiUrl For publicRuntimeConfig it works and i can see the variables but for privateRuntimeConfig it doesn't work How can i use privateRuntimeConfig in my project? for example i need to use them inside the "methods" property or in the "data" property but without exposing them to the browser? Or should i use some other way instead of privateRuntimeConfig?

thebyteland
  • 359
  • 1
  • 2
  • 10
MarioBe
  • 101
  • 1
  • 4

1 Answers1

1

privateRuntimeConfig is only available on the server as explained here: https://nuxtjs.org/docs/configuration-glossary/configuration-runtime-config#privateruntimeconfig

So you can only use it on the server's side, probably not where you think as of right now. At the end, Nuxt is a frontend so you can't really hide the data per-se. Everything that you want to use on the client-side needs to be public.

Otherwise, use some middleware or serverless functions as explained here:

kissu
  • 40,416
  • 14
  • 65
  • 133
  • So do you suggest using only publicRuntime config? Like i have a function to login and there i use encryptKey that comes from .env . I don't think it's a good idea to put that variable in publicRuntimeConfig – MarioBe Aug 19 '22 at 08:42
  • @MarioBe you can totally use the private one, you just need to understand when this is available (on the server). If you expect to use it on the client, it will not be possible. If your use case needs to be using a private key on the client, you will indeed need to take one of the alternatives that I've listed. – kissu Aug 19 '22 at 09:00
  • Yes i need to use them in front end. I want to inject them from docker so i don't include my .env file in my image and i use the ENV of docker-compose. But it seems that Nuxt doesn't recognize them since there is no .env file. That's why i want to use public and private config. But i still want some variables to be hidden. – MarioBe Aug 19 '22 at 09:11
  • For the hidden part, the answer is given above. For docker, most of the time you can pass the env variables to populate the `.env` file and then Nuxt will catch those by itself automatically. @MarioBe – kissu Aug 19 '22 at 09:21