Web development and Tech news Blog site. WEBISFREE.com
Understanding the Differences Between privateRuntimeConfig and publicRuntimeConfig in Setting Nuxt.js Environment Variables
Last Modified : 11 Oct, 2023 / Created : 12 Oct, 2023In Nuxt.js, you can declare environment variables in two ways: privateRuntimeConfig and publicRuntimeConfig. Below, we will briefly look at the differences between the two.
First, in `nuxt`, the `privateRuntimeConfig` and `publicRuntimeConfig` environment variables can be set and used in the nuxt.config.js file. Both options allow you to use environment variables, which can be used on either the server or client side of the project.
To summarize, privateRuntimeConfig is accessible only on the server side, while in contrast, publicRuntimeConfig can be accessed on both the server and client sides.
1. privateRuntimeConfig: Accessible only on the server side:
Variables within privateRuntimeConfig are only accessible on the server side. These variables are not sent to the client side, making them suitable for storing sensitive information (tokens, auth keys, passwords, etc.).
Important information like this should never be exposed externally, and must be handled only on the server. For this, you must use privateRuntimeConfig. For information that can be accessed externally, declare and access them using publicRuntimeConfig, as we will see below.
2. publicRuntimeConfig: Accessible on both server and client sides:
Unlike privateRuntimeConfig, variables within publicRuntimeConfig are accessible on both the server and client sides. This is used for storing general settings or information that can be safely shared publicly.
How should you use the declared environment variables? To access environment variables on both server and client side codes, use the `$config` object. Please see the example below.
To access on the server side, use the context object’s $config. On the client, you can use this.$config.
We have looked at the differences and methods regarding environment variables in Nuxt.js up to this point. To summarize, the main points are as follows:
By making this distinction, you can manage sensitive information safely without exposing it on the client side.
Understanding the Differences Between privateRuntimeConfig and publicRuntimeConfig in Setting Nuxt.js Environment Variables
First, in `nuxt`, the `privateRuntimeConfig` and `publicRuntimeConfig` environment variables can be set and used in the nuxt.config.js file. Both options allow you to use environment variables, which can be used on either the server or client side of the project.
What are the main differences between `privateRuntimeConfig` and `publicRuntimeConfig`?
To summarize, privateRuntimeConfig is accessible only on the server side, while in contrast, publicRuntimeConfig can be accessed on both the server and client sides.
1. privateRuntimeConfig: Accessible only on the server side:
Variables within privateRuntimeConfig are only accessible on the server side. These variables are not sent to the client side, making them suitable for storing sensitive information (tokens, auth keys, passwords, etc.).
export default {
privateRuntimeConfig: {
mySecret: process.env.MY_SECRET
}
}
privateRuntimeConfig: {
mySecret: process.env.MY_SECRET
}
}
Important information like this should never be exposed externally, and must be handled only on the server. For this, you must use privateRuntimeConfig. For information that can be accessed externally, declare and access them using publicRuntimeConfig, as we will see below.
2. publicRuntimeConfig: Accessible on both server and client sides:
Unlike privateRuntimeConfig, variables within publicRuntimeConfig are accessible on both the server and client sides. This is used for storing general settings or information that can be safely shared publicly.
export default {
publicRuntimeConfig: {
myPublicValue: process.env.MY_PUBLIC_VALUE
}
}
publicRuntimeConfig: {
myPublicValue: process.env.MY_PUBLIC_VALUE
}
}
How to Use Nuxt.js Environment Variables
How should you use the declared environment variables? To access environment variables on both server and client side codes, use the `$config` object. Please see the example below.
// Server-side
context.$config.mySecret
context.$config.myPublicValue
// Client-side
this.$config.myPublicValue
context.$config.mySecret
context.$config.myPublicValue
// Client-side
this.$config.myPublicValue
To access on the server side, use the context object’s $config. On the client, you can use this.$config.
In Conclusion
We have looked at the differences and methods regarding environment variables in Nuxt.js up to this point. To summarize, the main points are as follows:
- privateRuntimeConfig is for sensitive data intended for use only on the server side.
- publicRuntimeConfig is data that can be accessed and used publicly on both the server and client sides.
By making this distinction, you can manage sensitive information safely without exposing it on the client side.
Perhaps you're looking for the following text as well?