Access Values from privateRuntimeConfig in Nuxt

sobmortin354 0
Viewed 27

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?

environment-variables nuxt.js
1 Answers

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.

Nick Dawes0
Related