1

In my nuxt.config.js file I am using publicRuntimeConfig to store some environment variables:

publicRuntimeConfig: {
    apiKey: process.env.API_KEY,
}

and then accessing them in components with: this.$config.apiKey.

Switching to using privateRuntimeConfig the same method of accessing properties is not working. According to the documentation when ssr: true, there doesnt seem to be a different method for accessing the values. How can I access these values?

kissu
  • 40,416
  • 14
  • 65
  • 133
sobmortin354
  • 55
  • 5

1 Answers1

1

Public runtime variables are accessible anywhere within your Nuxt app, from the client side. This means anything declared within publicRuntimeConfig in nuxt.config.js is visible to anyone/everyone who visits your site. All they'd have to do is pop open a console and tap into the global Nuxt property (try typing __NUXT__.config in to the console on any Nuxt v2 site). Components are created on the client-side, and so they have access to public runtime variables via the $config property.

Private runtime variables are accessible on the server side via the Nuxt context, which is available in special lifecycle areas such as asyncData and nuxtServerInit. You do indeed access them the same way; private variables override public variables when accessing $config from the server side.

eg. declaring some public/private runtime configs...

nuxt.config.js

...
publicRuntimeConfig: {
  a: 'this is client-side'
}

privateRuntimeConfig: {
  a: 'this is server-side'
}
...

... and trying to access from the server-side

asyncData(context) {
  console.log(context.$config.a)
  // 'this is server-side'
}

... vs. trying to access from the client-side...

methods: {
  someMethod() {
    console.log(this.$config.a)
    // 'this is client-side'
  }
}

docs

privateRuntimeConfig
Value of this object is accessible from server only using $config. Overrides publicRuntimeConfig for server.

kissu
  • 40,416
  • 14
  • 65
  • 133
Nick Dawes
  • 2,089
  • 1
  • 13
  • 20
  • Thanks very much for that explanation. So having read a bit more about asyncData here [https://nuxtjs.org/docs/features/data-fetching#async-data], I call it in the page and pass down the values to components as a prop. But using this method, I can still the secrets when I run __NUXT__.config in the console which really isn't ideal. Should this be happening? This is when running locally. – sobmortin354 Sep 16 '22 at 20:12
  • Running in incognito from a new terminal seems to have fixed that so I suppose that was simply caused by my environment – sobmortin354 Sep 16 '22 at 20:27
  • By passing the value through asyncData, you’re making it available on the client-side. Why not just declare it as a publicRuntimeVariable instead? It’s a little unclear what you’re trying to achieve, and how private/public variables fit in with your plans. Maybe elaborate a little more and I (or someone) can help you with specifics. – Nick Dawes Sep 16 '22 at 21:24
  • I can't have the values as public as I need AWS keys to be able to initiate some aws clients - I am using Cognito to manage logins with an app hosted in Heroku. The other alternative to passing the keys down to the component and initiating the cognito client there is to initiate the client on build and pass that down to the component – sobmortin354 Sep 17 '22 at 10:25
  • 1
    I am guessing putting values into Vuex store is also exposing the values to the browser? – sobmortin354 Sep 17 '22 at 10:47
  • 1
    Yeah, Vuex is client side too. Here are more details regarding how to use private/sensitive keys: https://stackoverflow.com/a/69575243/8816585 – kissu Sep 17 '22 at 10:53