Web development and Tech news Blog site. WEBISFREE.com

HOME > nuxtjs

Understanding the Differences Between privateRuntimeConfig and publicRuntimeConfig in Setting Nuxt.js Environment Variables

Last Modified : 11 Oct, 2023 / Created : 12 Oct, 2023
140
View Count
In Nuxt.js, you can declare environment variables in two ways: privateRuntimeConfig and publicRuntimeConfig. Below, we will briefly look at the differences between the two.



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
  }
}

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
  }
}


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

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?

    Previous

    How to change the query string using useRouter in NuxtJS

    Previous

    [nuxtjs] How to Easily and Quickly Create a Sitemap Using @nuxtjs/sitemap